Question

我有一个包含3个字段的页面：

SearchSelect（react-select）
Dropdown（react-select）
InputNumber（react-number-format）

我需要清除Submit上的所有字段值。

InputNumber受控制，因此当我setState处于初始状态时，输入字段值将被清除。

我不确定如何清除两个选择的值，它们不受控制，因此如何在提交时清除其值？

3个字段：

<SearchSelect
 placeholder="Search fees"
 loadOptions={this.loadOptions}
 isAsync
 onChange={e => {
    this.makeHandleChange('fee')({
       ...fee,
       orderID: e.value.id,
    });
    this.setState({ submitted: false });
  }}
  key={searchBy}
  onFocus={() => this.getRidOfError('orderError')}
/>
<Dropdown
    options={docTypes}
    placeholder="Document Type"
    onChange={e => {
        this.makeHandleChange('fee')({
        ...fee,
        docTypeID: e.value,
      });
    }}
    onFocus={() => this.getRidOfError('docTypeError')}
/>
<InputNumber
   thousandSeparator
   prefix="$"
   value={fee.cost}
   onChange={e =>
     this.makeHandleChange('fee')({
     ...fee,
     cost: Number(
          e.target.value.replace(/[^0-9.-]+/g, ''),
     ),
     })
   }
   onKeyUp={() => this.getRidOfError('costError')}
   error={costError}
   />
   <Button
      text="submit"
      onClick={this.handleSubmit}
      data-test="submit"
   />

handleSubmit函数：

handleSubmit = () => {
const { fee } = this.state;
if (this.checkValidation()) {
  addFee(fee);
  this.setState(this.initialState);
  this.setState({ submitted: true });
}
};

makeHandleChange功能：

  makeHandleChange = changedProperty => newVal => {
    const newState = { ...this.state, [changedProperty]: newVal };
    this.setState({ ...newState });
  };

Dropdown组件：

export default function Dropdown(props) {
  return <Select {...selectProps(props)} />;
}

State：

  state = {
    fee: {
      orderID: '',
      docTypeID: '',
      cost: '',
    },
    orderError: false,
    docTypeError: false,
    costError: false,
    submitted: false,
  };

loadOptions：

loadOptions = async partialString=> {
    const { searchBy } = state;
    const { data = [] } = await axios.get(
      `api/Orders/Search?searchString=${partialString}
    );
     return data.map(orderWithClient => {
        const { order, client } = orderWithClient;
        const clientName = client && client.firstName;
        return {
           label: order.orderNumber
           subLabel: clientName,
           value: order,
        };
     });
  }
);

Answer 1

对于不受控制的组件，直到重新卸载组件后，该值才会重置。

最好的方法是make your dropdown component and select controlled component too，不需要太多更改。

编辑2： 我看到您的loadOptions是异步函数。因此，请在您的loadoptions函数中将选项设置为state，然后返回如下数据。

loadOptions = async partialString => {
    const { searchBy } = state;
    const { data = [] } = await axios.get(
      `api/Orders/Search?searchString=${partialString}`
    );
    
     const loadedOptions = data.map(orderWithClient => {
        const { order, client } = orderWithClient;
        const clientName = client && client.firstName;
        return {
           label: order.orderNumber
           subLabel: clientName,
           value: order,
        };
     });
     this.setState({loadedOptions});
     return loadedOptions;
  }
);

从渲染功能上加载的数据中选择选定的选项，如下所示

render() {
  const fee = this.state.fee;
  const loadedOptions = this.state.loadedOptions;
  const selectedOptionForDropdown = loadedOptions.find(item => item.value === fee.docTypeID);
  const selectedOptionForSelect = loadedOptions.find(item => item.value === fee.orderID)

...
}

<Dropdown
  options={docTypes}
  placeholder="Document Type"
  onChange={e => {
    this.makeHandleChange('fee')({
    ...fee,
    docTypeID: e.value,
    });
  }}
  value={selectedOptionForDropdown}
  onFocus={() => this.getRidOfError('docTypeError')}
/>

类似于您的反应选择组件，它也将价值作为其支柱之一。

<SearchSelect
  placeholder="Search fees"
  loadOptions={this.loadOptions}
  isAsync
  onChange={e => {
    this.makeHandleChange('fee')({
       ...fee,
       orderID: e.value.id,
    });
    this.setState({ submitted: false });
  }}
  key={searchBy}
  value={selectedOptionForSelect}
  onFocus={() => this.getRidOfError('orderError')}
/>

清除提交时选择的选定值

1 个答案: