Цель этого блога - познакомить вас с новой библиотекой форм, над которой я недавно работал. Поскольку существует множество библиотек форм, вам, вероятно, нужно знать, чем отличается этот…
Продолжайте читать, если вы:
- Вам необходимо создавать формы со сложными отношениями между полями
- Хотите полностью контролировать расположение полей в формах
- Хотите визуализировать выбранные вами компоненты поля (например, Материал, Bootstrap, Atlaskit, собственный HTML или даже вашу собственную библиотеку)
- Хотите иметь возможность создавать формы через графический интерфейс без написания кода
… Надеюсь, ты все еще со мной.
Построение отношений
React-Forms-Processor (RFP) фокусируется на определении отношений между полями, а не на самих полях. Например, вы можете:
- Хотите, чтобы поле было видимым, только если другое поле имеет определенное значение
- Хотите, чтобы значение этого поля было включено в общее значение формы, когда оно отображается
- Хотите, чтобы ваша форма была действительной только тогда, когда действительны все поля
Есть много других поддерживаемых вариантов использования, и большинство из них хорошо описано в учебнике в онлайн-демонстрации.
Как это использовать
RFP использует новый контекстный API, представленный в React 16.3, для предоставления двух основных компонентов: Form и FormFragment. По умолчанию поля будут отображаться с использованием собственных HTML-элементов, но вы можете дополнительно предоставить средство визуализации для большего удобства. На момент написания есть рендеры Atlaskit и Material-UI, но в будущем будет добавлено больше, и невероятно просто написать свой собственный (это просто случай сопоставления четко определенных атрибутов с props вашего желаемый компонент для каждого типа поля, которое вы хотите отобразить).
Затем вы предоставляете компоненту Форма определение JSON, в котором указываются поля для отображения и отношения между ними. Если вы хотите сгруппировать свои поля (например, по вкладкам, столбцам, разделам и т. Д.), Вы можете разделить определение по нескольким компонентам FormFragment, вложенным где-то внутри компонента Form.
Конструктор форм
Чтобы упростить задачу, вы можете создать JSON, специфичный для вашей формы, с помощью инструмента Form Builder в онлайн-демонстрации. Это дает вам предварительный просмотр формы, которую вы создаете, а также отображает спецификацию JSON, которую вы можете скопировать и вставить в свое приложение.
Обработка опционов
Статические параметры можно определить в модели JSON, но если вам нужно, чтобы параметры были более динамичными (например, выбирались с сервера или обновлялись на основе изменяющихся значений других полей). В онлайн-демонстрации вы можете увидеть пример этого, где в поле Участники на вкладке Одно определение выбираются символы из SWAPI.
Этой более продвинутой обработки параметров можно достичь, предоставив компоненту Форма свойство optionsHandler, которое представляет собой функцию, которая принимает текущее значение формы и поле для создания параметров и может вернуть либо обещание, либо массив параметров.
Проверка
В настоящее время для обработки существует 4 основных валидатора:
- Сопоставление с образцом регулярного выражения
- Минимальная длина символа
- Максимальная длина символа
- Минимальные и / или максимальные числовые значения
… Которые можно смешивать и подбирать по мере необходимости. В будущем будут добавлены дополнительные валидаторы, а также поддержка пользовательского обработчика валидации, который будет предоставляться в качестве опоры.
Резюме
Мне очень хотелось бы получить отзывы о том, что я сделал до сих пор, чтобы знать, стоит ли мне продолжать развивать этот проект. Я уверен, что он будет полезен для разработки приложений, поскольку решает конкретные варианты использования, с которыми я сталкивался ранее.
Пожалуйста, попробуйте онлайн-демонстрацию или установите пакет NPM и опробуйте его в своем собственном приложении и дайте мне знать, что вы думаете - хорошее или плохое!
Спасибо за прочтение!
Следующее сообщение: « Как создавать формы с помощью процессора React Forms »
