Блог

В настоящее время у нас есть компонент <RenderDropdown /> , который отображает material-ui <Select /> элемент. Это принимает options в качестве реквизита и завернуто в react-final-form <Field /> .

Наша проблема заключается в том, что когда мы загружаем initialValues реквизиты <Form /> , есть несколько случаев, когда выбранное выпадающее значение больше не существует в выпадающем списке, поэтому мы хотим установить для выпадающего значения значение null. Мы делаем это в <RenderDropdown /> :

   componentDidMount() {
    this.clearInputIfValueDoesntExistInOptions();
  }

  componentDidUpdate() {
    this.clearInputIfValueDoesntExistInOptions();
  }

 clearInputIfValueDoesntExistInOptions() {
    const {
      input: { value, onChange },
      options
    } = this.props;

    // Clear input value if it doen't exist in options
    if (
      value amp;amp;
      !options.some((option) => option.key === value || option.value === value)
    ) {
      console.log(
        "clearInputIfValueDoesntExistInOptions",
        "Setting value to null as the selected value does not exist in the current dropdown's options"
      );
      // If I use input.onChange, it does not update the final form state to null immediately.
      onChange(null);
    }
  }
 

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

Я сделал быструю демонстрацию, которая имитирует нашу проблему: https://codesandbox.io/s/react-final-form-inputonchange-null-k7poj

Спасибо.