Менеджер состояния формы
Условие
createForm({ initial, validate }): getState() → { values, errors, touched, valid, dirty }; setValue(name, value); setTouched(name); submit(onValid) - помечает все поля тронутыми и вызывает onValid(values) только при отсутствии ошибок; reset(). Подписка subscribe(fn) с отпиской.
Что проверяют тесты
начальное состояние
изменение значения
ошибки вычисляются, а не хранятся
submit помечает все поля и не вызывает при ошибке
submit вызывает при валидных данных
reset возвращает всё
подписка и отписка
снимок не связан с внутренним состоянием
Как подойти
Ядро Formik и react-hook-form без привязки к фреймворку. Три решения: ошибки вычисляются на каждом обращении (не хранятся - иначе появится эффект-синхронизатор и рассинхроны), состояние отдаётся копиями (инкапсуляция), submit помечает всё тронутым до проверки (иначе пользователь нажал кнопку и не понял, почему ничего не произошло). dirty считается сравнением с начальными значениями, а не флагом - флаг не вернётся в ложь, когда пользователь отменит правку руками.
Подсказки: 3
- Ошибки выводятся из значений - хранить их отдельно значит синхронизировать.
- getState должен отдавать копии, иначе внешний код сможет поменять внутреннее состояние.
- submit обязан пометить все поля тронутыми, иначе ошибки не покажутся.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.