У меня большая форма, состоящая из 30-40 полей.
Форма логически и визуально разделена на части.Например: «данные адреса» «данные кредитной карты».Я хотел бы разделить его на несколько компонентов React.
В моей форме изменения, внесенные пользователем в некоторых частях, часто вызывают изменения в других частях.Некоторые изменения:
- Сброс определенных частей формы.
- Автоматическое заполнение определенных частей формы (например, для определенной кредитной карты мы автоматически предлагаем адрес, сохраненный из прошлых транзакций)
- повторно проверять достоверность различных частей (например, мы отправляем только по этому адресу дляпокупки на 100 $ или более)
Насколько я понимаю, в React parent не должен вызывать функции для детей (через ref), а должен объявлять состояние, которое передается детям через props.Тем не менее, все упомянутые изменения являются только начальным состоянием и могут быть немедленно отменены пользовательским вводом.
Насколько я понимаю, у меня есть следующие варианты:
обязательно пройтигосударство для детей.Это может быть сделано через ref или через «начальное / переопределенное значение».В любом случае, я передаю состояние вручную, а не один единственный источник правды.
Сделать моих детей формами "немыми" и получать все значения форм от родителя.Это кажется непрактичным (насколько я могу судить), потому что мне нужно было бы передать каждое входное значение и получить все из них в качестве реквизита.
Аналогично 2, сохранить состояние в Redux.Мне все равно придется хранить каждое отдельное значение формы в магазине, что является громоздким. Сообщество React также не одобряет это.
Откажитесь от деления формы на подпрограмму.-компоненты.У меня есть только один источник правды (состояние компонента) Честно говоря, в настоящее время это кажется лучшим решением.
Как бы вы это сделали?
Спасибо за ваше время.