#reactjs #react-final-form
#reactjs #react-final-form
Вопрос:
В настоящее время у нас есть компонент <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
Спасибо.