Пример простой формы
Мы начнем с действительно простого примера. Компонент React для добавления нового пользователя.
Чтобы упростить пример, мы будем хранить все данные в локальном состоянии компонента и предполагать, что компонент сделает прямой HTTP-запрос к серверу при отправке формы, чтобы сохранить результаты. Нравится:
Сначала мы добавим разметку для создания фиктивной формы:
Здесь мы используем контролируемые компоненты React с внутренним состоянием, которое привязано к значениям из состояния локального компонента. Таким образом, чтобы эта форма работала, мы добавляем обработчики событий onChange для изменения состояния события ввода пользователя. В противном случае форма будет доступна только для чтения. Нравится:
Теперь наша основная форма должна работать, но вы можете увидеть повторяющийся узор в коде, который не выглядит слишком элегантным даже в таком простом примере. Мы собираемся изучить способы сделать формы React намного лучше.
Знакомство с паттерном "Связи ценностей"
Очевидной идеей было бы скрыть эту привязку свойств value / onChange за некоторой настраиваемой оболочкой компонента ‹input /›. Но как?
В идеале мы хотели бы просто передать одно значение состояния в наш ‹TextInput /› так, как этот компонент мог бы его изменить. Это можно сделать, если мы заключим наше значение в объект, содержащий и значение, и функцию для его обновления.
Что, по сути, называется «Ссылка на значение». Мы могли бы создавать ссылки с помощью такой функции, которую нужно написать один раз:
А затем используйте его так:
С такой штукой наш настраиваемый компонент ‹Input /› становится простым и элегантным:
В шаблоне Value Link хорошо то, что ваш пользовательский компонент ввода ничего не говорит о том, как на самом деле управляется состояние приложения. Это может быть состояние React. Или это может быть что-то еще, скрытое за функцией valueLink.set (x). ‹Ввод /› все равно. Вся логика привязки данных инкапсулируется в конкретный объект ссылки значения.
Эта особенность ценностных ссылок открывает множество возможностей, о которых мы поговорим в следующих статьях.
Библиотека ссылок Volicon / Verizon Value
Как видите, довольно легко создать простые ссылки значений и оболочки ввода самостоятельно. Но, вероятно, это не то, что вам нужно. Вместо этого вы можете предпочесть выполнить npm install:
npm install valuelink --save-dev
Затем просто импортируйте ссылки и компоненты, которые уже были для вас подготовлены, расширьте LinkedComponent и сразу же начните писать render():
Тем не менее, эти вызовы this.linkAt () выглядят немного неуклюже, добавляя визуального шума. Поэтому сделаем последний штрих - воспользуемся хелпером this.linkAll (), предоставленным библиотекой ValueLink.
this.linkAll () создаст ссылки для всех атрибутов состояния (или для перечисленных атрибутов, если были переданы ключи состояния - например, this.linkAll ('a', 'b') ) и оберните их в один объект. С этим изменением наш метод render (), наконец, стал красивым и чистым:
Этот код не только красиво выглядит, но и довольно эффективен. Дело в том, что библиотека ValueLink намного умнее, чем наша наивная функция linkState из предыдущего раздела. Все ссылки на члены состояния, которые он создает, прозрачно кэшируются внутри компонента. Они будут воссозданы только в том случае, если их значения действительно изменятся.
linkAll () проверяет актуальность всех кешированных ссылок и предоставляет вам прямой доступ к кешу ссылок компонента. Кроме того, вы можете получить доступ к ссылкам из ваших пользовательских методов обработки событий с помощью this.links; нет необходимости воссоздавать их там .
Мне не нравятся эти ‹Input /› обертки!
Понятно. Вероятно, это потому, что вы еще не читали следующую статью о проверке форм. Это показывает, как вы действительно можете извлечь из них пользу.
Но в любом случае для вас есть хорошие новости. Вы можете использовать ValueLink со стандартными входными данными формы React, потому что ссылка может преобразовывать себя в пару свойств value / onChange. Просто добавьте .props:
Так выглядит двусторонняя привязка данных в React. Неплохо, не правда ли?
Итак, вот как мы работаем с простыми формами. И это было действительно началом. Volicon Value Links предоставляет вам множество дополнительных функций, таких как простая проверка формы и ссылки на элементы сложного состояния компонента.
В следующих статьях я покажу как проверить нашу форму и как управлять сложным состоянием.
