0

I have a simple list that gathers info from two text fields, a drop down and a people picker. I am able to submit to my custom list. I have set the state back to the defaultValue, which I have defined in state, once the list has been submitted. If I try to submit again, I catch the errors that I have defined stating that the fields have empty values, yet they look populated.

Is there a simple way to clear all values from Office Fabric UI input fields?

Render Method:

        <div className={styles.inputContainer}>
            <label className={styles.labelWidth}>Company name: </label>
              <TextField 
                name="companyName"
                onChanged={(e) => {this._handleName(e);}}
                defaultValue={this.state.defaultValue.companyName}
              />       
            <br/>
        </div>

        <div className={styles.inputContainer}>
            <label className={styles.labelWidth}>Total Revenue: </label>
                <TextField 
                  name="revenue"
                  type="number"
                  onChanged={this._handleRevenue}
                  defaultValue={this.state.defaultValue.revenue}
                />
            <br/>
        </div>

        <div className={styles.inputContainer}>
            <label className={styles.labelWidth}>Department: </label>
            <Dropdown
                placeHolder="Select an Option"
                label=""
                id="component"
                selectedKey={this.state.defaultValue.department ? this.state.defaultValue.department.key : undefined}
                ariaLabel="Basic dropdown example"
                options={[
                    { key: '', text: 'Select an option'},
                    { key: 'Information Technology', text: 'Information Technology' },
                    { key: 'Cyber Security', text: 'Cyber Security' },
                    { key: 'Infrastructure', text: 'Infrastructure' },
                    { key: 'Logistics', text: 'Logistics'},
                    { key: 'Other', text: 'Other'}
                ]}
                onChanged={this._handleDepartment}
            />
            <br/>
        </div>

        <div className={styles.inputContainer}>
          <label className={styles.labelWidth}>Department Head:</label>
            <PeoplePicker
              context={this.props.context}
              titleText=""
              personSelectionLimit={1}
              groupName={""}
              showtooltip={false}
              isRequired={true}
              ensureUser={true}
              disabled={false}
              defaultSelectedUsers={['']}
              selectedItems={this._getManager} 
            />
          </div>

onChange Methods:

    private _getManager(items: any[]) {
        this.state.defaultValue.departmentHeadId.pop(),
        this.state.defaultValue.departmentHeadName.pop();
        for (let item in items) 
        {   
          this.state.defaultValue.departmentHeadId.push(items[item].id),
          this.state.defaultValue.departmentHeadName.push(items[item].text);
        }
      }  

      private _handleName = (fieldInput:string) => {
        var input = {...this.state.defaultValue};
        input.companyName = fieldInput;
        this.setState({
          defaultValue:input
        });
      }

      private _handleRevenue = (value: string): void => {
        var input = {...this.state.defaultValue};
        input.revenue = value;
        this.setState({
          defaultValue:input
        });
      }

      private _handleDepartment = (item:IDropdownOption): void => {
        var input = {...this.state.defaultValue};
        input.department = item;
        this.setState({
          defaultValue:input
        });
      }

Setting state back to default:

    private _closeDialog = (): void => {
      this.setState({ 
        hideDialog: true,
        status:'',
        defaultValue: {
          companyName:'',
          revenue:'',
          department: {
            key:'',
            text:''
          },
          departmentHeadId: [],
          departmentHeadName: [],
        }
      });
    }
1

Bind your control's value to state. When you clear out state, the controls will clear out as well.

<TextField 
  name="revenue"
  type="number"
  onChanged={this._handleRevenue}
  defaultValue={this.state.defaultValue.revenue}
  value={this.state.whatever}
  />
  • Thanks for the suggestion. I've read not to do it this way and also been told not to have a value and a default value within the same input field. – MAS89 Feb 26 at 16:07
  • Also peoplePicker and dropDown do not support value attributes in my instance. – MAS89 Feb 26 at 16:10
0

by changing

defaultValue={this.state.defaultValue.revenue}

to

value={this.state.defaultValue.revenue}

therefore making it a controlled component seemed to do the trick for the textFields.

For the DropDown field I added a defaultValue and this corrected the issue after submit.

For the pnp PeoplePicker I added

ref={(e) => {this.myPicker=e;}}

to the component and then, on addItem(), set the state of the selected persons property from the reference created.

public myPicker: PeoplePicker;

this.myPicker.setState ({
  selectedPersons: []
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.