重置 redux-form 时，react-select 不会清除值

Question

我有一个无状态的 React 函数来将反应选择 Select 渲染到表单中。除了 redux-form 被重置之外，其他一切都可以很好地与 redux-form 配合使用。成功发布后我需要手动重置表单。

当 Select 值发生变化时，onChange 和 onBlur 会正确更改 redux-form 值。当我重置 redux-form 时，redux-form 值被清除，但 Select 将具有旧值。

function SelectInput(props) {
  const { input, options, label } = props;    
  const { onChange, onBlur } = input;

  const handleChange = ({ value }) => {
    onChange(value);
  };
  const handleBlur = ({ value }) => {
    onBlur(value);
  };    
  return (
    <FormField {...props}>
      <Select placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />
    </FormField>
  );
}

我将 SelectInput 转换为 React.PureComponent，并将该值添加为组件内的状态，并查找组件何时收到新的 props：

 constructor(props) {
   super(props);
   this.state = {value: ''}
  }
 componentWillReceiveProps(nextProps){ 
   this.setState({value: nextprops.input.value}) 
 }

 <Select value={this.state.value} placeholder={label} options={options} onChange={handleChange} onBlur={handleBlur} />

这样 Select 根本无法显示该值。

问题是，当该字段所属的 redux-form 被重置时，如何更新 Select 以显示空值？Redux-form 在 redux 状态内正确重置值，如果我尝试提交表单，验证会注意到该 Select 具有空值。然而，选择将显示旧值，以便用户认为已选择一个值。

重置是通过在实际的 redux-form 组件中调度重置来完成的。Redux devtools 显示字段已重置，所有值的 redux 状态均已清除，Select 组件只是不会将 DISPLAYED 值更新为空。

const afterSubmit = (result, dispatch) =>
  dispatch(reset('datainputform'));

export default reduxForm({
  form: 'datainputform',
  onSubmitSuccess: afterSubmit,
})(DataInputForm);

我使用的版本：

• 反应选择@v2.0.0-beta.6
• redux-form@7.3.0

Answer 1

您还可以在表单级别本身设置键。该键将采用一个可以存储在组件状态中的唯一值。每次重置时都会更新此唯一值。

state = {
  unique_key: ''
}

// this is the onClick handler for reset button on the form
onResetForm = () => {
  reset_val = Date.now();
  this.props.reset();
  this.setState({unique_key: reset_val});
}

<Form actions={action_func}, key={this.state.unique_key}/>

现在，每当单击重置时，处理程序都会更新 unique_key。这将导致使用默认值重新呈现表单。该处理程序还调用表单重置函数来清除 redux。