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

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

问题描述:

我有一个无状态的 React 函数来渲染一个 react-select Select 到一个表单.除了 redux-form 被重置时,其他一切都可以很好地与 redux-form 配合使用.成功发布后,我需要手动重置表单.

I have a stateless React function to render a react-select Select to a form. Everything else works nicely with redux-form except when redux-form is reset. I need to reset the form manually after successful post.

onChange 和 onBlur 在 Select 值更改时正确更改 redux-form 值.当我重置 redux-form 时,redux-form 值被清除,但 Select 将具有旧值.

onChange and onBlur change the redux-form value correctly when Select has a value change. When I reset the redux-form, the redux-form value is cleared but the Select will have the old value.

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 时查找:

I converted the SelectInput to React.PureComponent, and added the value as a state inside the component and looked for when the Component received new 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 根本无法显示值.

With this Select was not able to show the value at all.

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

The problem is that how I can update the Select to show empty value when redux-form that this field is part of is reset? Redux-form resets the value corretly inside the redux state and if I try to submit the form, validation notices that that Select has empty value. The Select will however display the old value so that user thinks that there is a value selected.

Reset 是通过在实际的 redux-form 组件中调度 reset 来完成的.Redux devtools 显示字段被重置并且 redux 状态从所有值中清除,Select 组件只是不会将 DISPLAYED 值更新为空.

Reset is done by dispatching reset in the actual redux-form component. Redux devtools show that fields are reset and the redux state is cleared from all the value, Select component just won't update the DISPLAYED value to empty.

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

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

我使用的版本:

  • react-select@v2.0.0-beta.6
  • redux-form@7.3.0

成功了.问题是处理 Select null 值.将无状态函数更改为 PureComponent,将值添加到状态.

Got it working. Problem was handling the Select null value. Changed stateless function to PureComponent, added the value to state.

constructor(props) {
    super(props);
    this.state = { value: '' };
  }

Redux-form 通过发送新的 props 来改变 react-select 的值.所以补充

Redux-form changes the react-select value by sending new props. So added

componentWillReceiveProps(nextProps) {
    if (nextProps.input.value === '') {
      this.setState({ value: '' });
    }
  }

将 setState 添加到 handleChange:

Added setState to handleChange:

  handleChange = (data) => {
    const value = data === null ? '' : data;
    this.setState({ value });
    this.props.input.onChange(data.value);
  };

然后添加 value 属性.

And then added the value prop.

<Select value={this.state.value}...