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，并将值添加为组件内的状态，并在Component收到新的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} />

使用此选项根本无法显示该值。

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

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

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

Answer 1

搞定了。问题是处理Select null值。将无状态函数更改为PureComponent，将值添加到state。

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

Redux-form通过发送新道具来更改react-select值。添加

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

将handleState添加到handleChange：

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

然后添加值prop。

<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。这将导致使用默认值重新呈现表单。处理程序还调用表单重置功能以清除Redux。

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

2 个答案: