Форма реакции Hude, необходимо инициировать проверку на уровне формы, делегировать ее всем дочерним элементам

#reactjs

Вопрос:

Я работаю в компании по разработке программного обеспечения над нашим первым крупномасштабным проектом React. Мы используем React 17, все является функцией.

У нас есть форма, состоящая из нескольких сотен полей ввода. Мы визуализируем эту форму с использованием текстового поля пользовательского интерфейса Material, клавиатуры и компонентов автозаполнения. Эта форма обрабатывает представление XML-сообщений, которыми обмениваются конечные точки. Существует 20 таких XML-сообщений, и многие поля (и коллекции полей) являются общими. Например, существует поле под названием MessageId, которое отображается во всех XML-сообщениях, и группа полей под названием «Заголовок», которая состоит из нескольких полей, таких как MessageId . Время отправки сообщений, отправитель сообщений и т. Д.

Поэтому первое, что мы сделали, это создали компоненты пользовательского интерфейса, которые инкапсулируют представление этих общих компонентов, чтобы мы могли повторно использовать их во всех 20 сообщениях. Кроме того, мы используем пользовательские крючки для проверки на сайте компонентов. Это делается для облегчения повторного использования. Наличие проверки на уровне формы означало бы, что компонент не может знать, как проверить себя.

Поэтому мы хотим запустить проверку на уровне формы, делегировать проверку всем дочерним элементам и, если все пойдет хорошо, отправить форму.

Вопрос в том, является ли это «правильным» способом сделать это в react. И является ли это реактивным способом мышления? И если это действительно приемлемый шаблон реагирования, каков наилучший способ сделать это?

Мы задаем этот вопрос, поскольку обширный поиск в Google по «формам реакции на проверку детей-триггеров» не дает никаких значимых результатов, в том, что я лично считаю базовой необходимостью для платформы, т. Е. Делегировать проверку компонентам и ждать результатов. Только react-hook-форма предлагает нечто подобное здесь https://react-hook-form.com/api/useform/trigger

Комментарии:

1. Это зависит от варианта использования и уровня безопасности, который вы хотели бы видеть в формах и их полях. Для простого веб-сайта достаточно простой проверки формы, например, проверки того, есть ли в электронном письме действительный адрес электронной почты или в поле номера телефона действительно есть номера. Для более крупных проектов может потребоваться несколько уровней проверки (проверка формы и поля), и вместо того, чтобы делать это с нуля, вы можете захотеть поискать существующие библиотеки, такие как formik.org это предлагает такую функциональность.

2. Formik НЕ поддерживает делегирование проверки для дочерних полей ввода.