Я пытаюсь реализовать форму с двумя последовательными зависимыми параметрами Select с помощью response-final-form и material-ui
Требования
- Оба поля обязательны для заполнения
- Когда пользователь выбирает значение страны
- поле города должно быть пустым
- поле города не должно быть помечено как недействительное
- Пользователь должен иметь возможность полностью сбросить форму в любое время
Я изо всех сил пытаюсь найти простое и элегантное решение для этих требований с помощью реакционно-окончательной формы API.
Могут быть подходы с мутаторами , response-final-form-listeners или , но мне кажется, что это общий случай использования форм для которого было бы неплохо простое решение без продвинутых API.
Вот версия с комбинацией FormSpy компонента, useRef hook и form.reset api.
https://codesandbox.io/embed/react-final-form-material-ui-field-dependencies-hn7ps
- подписаться на значения формы через FormSpy
onChange prop
- обновлять ref ref каждый раз, когда меняются значения
- сравните значения ref с новыми значениями и используйте
form.reset API для сброса значения поля города без запуска проверки
Вот еще одна версия, использующая Объявление правил формы подход через react-final-form-listeners, как советовал Эрик.
https://codesandbox.io/embed/react-final-form-material-ui-field-dependencies-ijxd0
Это намного проще, так как нам не нужен реагирующий реф и FormSpy.
Оба решения работают почти идеально , за исключением того, что метод form.reset переопределяет форму initialValues под капотом, так что кнопка RESET больше не сбрасывает форму на исходную initialValues больше .
Существует ли встроенный способ для отслеживания изменений состояния формы и сравнения старых / новых значений?