response-select не очищает значение при сбросе избыточной формы

Question

У меня есть функция React без состояния, чтобы отреагировать Select-select на форму.Все остальное прекрасно работает с redux-формой, кроме случаев, когда redux-form сбрасывается.Мне нужно сбросить форму вручную после успешного поста.

onChange и onBlur корректно изменяют значение в форме приращения, когда в 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, добавил значение в качестве состояния внутри компонента и искал, когда Компонент получил новые реквизиты:

 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был не в состоянии показать значение на всех.

Проблема в том, что как я могу обновить Select, чтобы показывать пустое значение, когда приставная форма, частью которой является это поле, сбрасывается?Redux-form корректно сбрасывает значение внутри состояния приращения, и если я пытаюсь отправить форму, проверка замечает, что у Select есть пустое значение.Однако при выборе будет отображаться старое значение, так что пользователь думает, что выбрано значение.

Сброс выполняется путем отправки сброса в фактический компонент формы-редукса.Redux devtools показывает, что поля сбрасываются, а состояние избыточности очищается от всех значений, компонент 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

Вы также можете установить ключ на самом уровне формы.Ключ примет уникальное значение, которое вы можете сохранить в состоянии компонента.Это уникальное значение будет обновляться каждый раз, когда происходит сброс.

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.Это приведет к повторной визуализации формы со значениями по умолчанию.Обработчик также вызывает функцию сброса формы, чтобы очистить избыточный код.

Answer 2

Получил это работает.Проблема была в обработке значения Select null.Изменена функция без сохранения состояния на 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);
  };

А затем добавлено значение prop.

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