Формы в ReactJS

Элементы HTML формы работают немного иначе, чем другие элементы DOM в React, потому что элементы формы естественным образом сохраняют некоторое внутреннее состояние. Например, эта форма в обычном HTML допускает одно имя:

Эта форма имеет поведение HTML-формы по умолчанию для просмотра на новой странице, когда пользователь отправляет форму. Если вы хотите, чтобы это было в React, это просто работает. Но в большинстве случаев удобно иметь функцию JavaScript, которая обрабатывает представление формы и имеет доступ к данным, которые пользователь вводил в форму. Стандартный способ достичь этого — технологии под названием «контролируемые компоненты».


Контролируемые компоненты

Элементы HTML формы, такие как <input>, <textarea> и <select>, как правило, поддерживают собственное состояние и обновляют его на основе ввода пользователем. В React, состояние обычно сохраняется в состоянии свойства компонентов и обновляется только с помощью setState().
Мы можем объединить их, сделав Реагированное состояние «единственным источником истины». Затем компонент React, который отображает форму, также контролирует, то что происходит в этой форме при последующем вводе пользователя. Элемент входной формы, значение которого контролируется React, таким образом, называется «управляемым компонентом».
Например, если мы хотим, чтобы предыдущий пример регистрировал имя при его отправке, мы можем написать форму как контролируемый компонент:

Поскольку атрибут value установлен в нашем элементе формы, отображаемое значение всегда будет this.state.value, что делает React state источником истины. Поскольку handleChange работает при каждом нажатии клавиши, чтобы обновить состояние React, отображаемое значение будет обновляться по мере ввода пользователем.
С управляемым компонентом каждая мутация состояния будет иметь связанную функцию обработчика. Это упрощает изменение или проверку ввода пользователя. Например, если мы хотим, чтобы эти имена записывались со всеми заглавными буквами, мы могли бы написать handleChange как:

textarea тег

В HTML, элемент <textarea> определяет его текст своими дочерними элементами:

В React <textarea> использует атрибут value. Таким образом, форма с использованием <textarea> может быть написана очень похоже на форму, использующую однострочный ввод:

Обратите внимание, что this.state.value инициализируется в конструкторе, так что текстовая область начинается с некоторого текста в нем.


select тег

В HTML <select> создает раскрывающийся список. Например, этот HTML создает раскрывающийся список вкусов:

Обратите внимание, что параметр Coconut изначально выбран как атрибут по умолчанию. Вместо использования этого выбранного атрибута, используется атрибут value в теге root select. Это более удобно в управляемом компоненте, потому что вам нужно только обновить его в одном месте. Например:

В целом,  <input type = «text»>, <textarea> и <select> все работают очень похоже — все они принимают атрибут value, который можно использовать для реализации управляемого компонента.

Note

Вы можете передать массив в атрибут value, позволяя выбрать несколько опций в теге select:


Обработка нескольких полей

Когда вам нужно обрабатывать несколько управляемых элементов ввода, вы можете добавить атрибут имени к каждому элементу и позволить функции обработчика выбрать, что делать, исходя из значения event.target.name.
Например:

Обратите внимание, как мы использовали синтаксис ES6 для обновления ключа состояния, соответствующего данному имени ввода:

Это эквивалентно этому ES5-коду:

Кроме того, поскольку setState () автоматически объединяет частичное состояние в текущее состояние, нам нужно было только вызвать его с измененными частями.


Контролируемое входное значение Null

Указание поддержки значения на управляемом компоненте не позволяет пользователю изменять ввод, если вы этого не хотите. Если вы указали значение, но ввод все еще доступен для редактирования, возможно, вы случайно установили значение неопределенным или null.
Следующий код демонстрирует это. (Сначала ввод заблокирован, но становится доступным после короткой задержки.)


Альтернативы контролируемым компонентам

Иногда бывает сложно использовать контролируемые компоненты, потому что вам нужно написать обработчик событий для каждого способа, которым ваши данные могут измениться, и передать все входное состояние через компонент React. Это может стать особенно раздражающим, когда вы конвертируете существующую базу кода в React или интегрируете приложение React с библиотекой, отличной от React. В таких ситуациях вы можете проверить неконтролируемые компоненты, альтернативный метод для реализации входных форм.

Leave a Reply

Добавить комментарий