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

Question

我有一个无状态的 React 函数，可以将 react-select Select 渲染到表单。除了重置 redux-form 之外，其他一切都可以很好地与 redux-form 一起使用。成功后我需要手动重置表单 post。

onChange 和 onBlur 在 Select 有值变化时正确改变 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>
  );
}

我将 Select 输入转换为 React.PureComponent，并将该值作为状态添加到组件内，并查找组件何时收到新道具：

 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 具有空值。然而，Select 将显示旧值，以便用户认为有一个值 selected.

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

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

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

我使用的版本：

反应-select@v2.0.0-beta.6
redux-form@7.3.0

Answer 1

成功了。问题是处理 Select 空值。将无状态函数更改为 PureComponent，将值添加到状态。

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

Redux-form 通过发送新的 props 来改变 react-select 的值。所以添加

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

已将 setState 添加到 handleChange：

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

然后添加值属性。

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

Answer 2

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

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。这将导致 re-rendering 具有默认值的表单。处理程序还调用表单重置函数来清除 redux。

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

react-select does not clear value when redux-form is reset

reactjs

react-select

redux-form