反应选不清晰值时Redux的形式被复位(react-select does not clear va

我有一个无状态的功能作出反应渲染反应过来，选择选择形式。 其他一切与终极版型很好地工作时，终极版形式被重置时除外。 我要成功后后手动复位形式。

的onChange和的onblur正确更改了Redux形式的值时，选择一个值的改变。 当我恢复了Redux形式，在终极版形式的值将被清除，但选择将旧值。

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，并添加该值作为组件内的状态下，并期待用于当所述组件接收到的新道具：

 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的形式，这个字段的一部分是重置？ 终极版型了Redux状态里面corretly重置价值，如果我尝试提交表单，确认注意到的是选择具有空值。 使用户认为有选择的值的选择将显示但旧值。

复位通过在实际Redux的形成分调度复位完成。 终极版devtools显示字段复位，Redux的状态从所有值清零，选择组件就不会更新显示的值清空。

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:

得到它的工作。 问题是处理选择空值。 改变无国籍功能PureComponent，增值到状态。

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

Redux的形式改变通过发送新的道具反应选值。 所以加

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。 这将导致重新呈现形式的默认值。 该处理器还呼吁形式复位功能，清除了Redux。

文章来源: react-select does not clear value when redux-form is reset