Почти каждое приложение в
В этой статье вы познакомитесь с основами использования форм в React, чтобы пользователи могли добавлять или редактировать информацию. Мы рассмотрим два разных способа работы с элементами управления вводом, а также плюсы и минусы каждого из них. Мы также рассмотрим, как обрабатывать проверку, и некоторые сторонние библиотеки для более продвинутых вариантов использования.
Неконтролируемые входы
Самый простой способ работы с формами в React — это использование так называемых «неконтролируемых» входных данных формы. Это означает, что React не отслеживает состояние ввода. Элементы ввода HTML естественным образом отслеживают свое собственное состояние как часть DOM, поэтому при отправке формы мы должны считывать значения из самих элементов DOM.
Для этого React позволяет нам создать «ref» (ссылку) для связи с элементом, предоставляя доступ к базовому узлу DOM. Давайте посмотрим, как это сделать:
class SimpleForm extends React.Component {
constructor (props) {
super (props) ;
// create a ref to store the DOM element
this.nameEl = React.createRef () ;
this.handleSubmit = this.handleSubmit.bind (this) ;
}
handleSubmit (e) {
e.preventDefault () ;
alert (this.nameEl.current.value) ;
}
render () {
return (
)
}
}
Как вы можете видеть выше, для компонента на основе класса вы инициализируете новую ссылку в конструкторе, вызывая React.createRef, присваивая ее свойству экземпляра, чтобы она была доступна в течение всего времени существования компонента.
Чтобы связать ссылку с вводом, она передается элементу в качестве специального refатрибута. Как только это будет сделано, к базовому узлу DOM ввода можно будет получить доступ через this.nameEl.current.
Давайте посмотрим, как это выглядит в функциональном компоненте:
function SimpleForm (props) {
const nameEl = React.useRef (null) ;
const handleSubmit = e => {
e.preventDefault () ;
alert (nameEl.current.value) ;
};
return (
) ;
}
Здесь нет большой разницы, кроме замены createRefна useRefкрючок.
Пример: форма входа
function LoginForm (props) {
const nameEl = React.useRef (null) ;
const passwordEl = React.useRef (null) ;
const rememberMeEl = React.useRef (null) ;
const handleSubmit = e => {
e.preventDefault () ;
const data = {
username: nameEl.current.value,
password: passwordEl.current.value,
rememberMe: rememberMeEl.current.checked,
}
// Submit form details to login endpoint etc.
//...
};
return (
) ;
}
Посмотреть на CodePen
Хотя неконтролируемый ввод отлично подходит для быстрых и простых форм, у него есть некоторые недостатки. Как вы могли заметить из приведенного выше кода, мы должны считывать значение из элемента ввода всякий раз, когда мы этого хотим. Это означает, что мы не можем обеспечить мгновенную проверку поля по мере того, как пользователь вводит текст, а также мы не можем выполнять такие действия, как принудительное применение пользовательского формата ввода, условное отображение или скрытие элементов формы, а также отключение/включение кнопки отправки.
К счастью, в React есть более сложный способ обработки входных данных.
Управляемые входы
Ввод считается «управляемым», когда React отвечает за поддержание и настройку его состояния. Состояние синхронизируется со значением ввода, а это означает, что изменение ввода приведет к обновлению состояния, а обновление состояния изменит ввод.
Давайте посмотрим, как это выглядит на примере:
class ControlledInput extends React.Component {
constructor (props) {
super (props) ;
this.state = { name: '' };
this.handleInput = this.handleInput.bind (this) ;
}
handleInput (event) {
this.setState ({
name: event.target.value
}) ;
}
render () {
return (
) ;
}
}
Как видите, мы настроили своего рода круговой поток данных: состояние к входному значению, изменение события к состоянию и обратно. Этот цикл дает нам большой контроль над вводом, так как мы можем реагировать на изменения значения на лету. Благодаря этому контролируемые входы не имеют ограничений неконтролируемых, открывая следующие возможности:
мгновенная проверка ввода: мы можем дать пользователю мгновенную обратную связь, не дожидаясь, пока он отправит форму (например, если его пароль недостаточно сложен)
мгновенное форматирование ввода: мы можем добавить правильные разделители к вводу валюты или сгруппировать телефонные номера на лету
условно отключить отправку формы: мы можем включить кнопку отправки после выполнения определенных критериев (например, пользователь согласился с условиями)
динамически генерировать новые входные данные: мы можем добавлять дополнительные входные данные в форму на основе предыдущего ввода пользователя (например, добавление сведений о дополнительных людях при бронировании отеля)
Проверка
Как я упоминал выше, цикл непрерывного обновления контролируемых компонентов позволяет выполнять непрерывную проверку входных данных по мере того, как пользователь их вводит. Обработчик, прикрепленный к onChangeсобытию ввода, будет запускаться при каждом нажатии клавиши, что позволит вам мгновенно проверить или отформатировать значение.
Пример: проверка кредитной карты
Давайте взглянем на реальный пример проверки номера кредитной карты, когда пользователь вводит его в платежную форму.
В примере используется библиотека с именем типа кредитной карты для определения эмитента карты (например, Amex, Visa или Mastercard) в качестве типов пользователей. Затем компонент использует эту информацию для отображения изображения логотипа эмитента рядом с вводом:
import creditCardType from «
function CreditCardForm (props) {
const [cardNumber, setCardNumber] = React.useState («») ;
const [cardTypeImage, setCardTypeImage] = React.useState (
«
) ;
const handleCardNumber = (e) => {
e.preventDefault () ;
const value = e.target.value;
setCardNumber (value) ;
let suggestion;
if (value.length > 0) {
suggestion = creditCardType (e.target.value)[0];
}
const cardType = suggestion? suggestion.type: «unknown»;
let imageUrl;
switch (cardType) {
case «visa»:
imageUrl = «
break;
case «mastercard»:
imageUrl = «
break;
case «
imageUrl = «
break;
default:
imageUrl = «
}
setCardTypeImage (imageUrl) ;
};
return (
) ;
}
Обработчик ввода onChangeвызывает creditCardType () функцию с текущим значением. Это возвращает массив совпадений (или пустой массив), который можно использовать для определения того, какое изображение отображать. Затем
Вы можете использовать некоторые числа отсюда для проверки ввода.
Библиотеки форм
Как вы, возможно, заметили, при работе с формами существует определенное количество шаблонного кода, особенно при подключении входных данных к их значениям состояния и обработчикам. Как и следовало ожидать, существует множество сторонних библиотек, которые помогут облегчить работу с более крупными и сложными формами.
Чтобы дать вам некоторое представление о том, на что похоже использование библиотеки форм, давайте кратко рассмотрим одну из них под названием Fresh. Цель этой библиотеки — охватить 90% ваших распространенных вариантов использования с помощью простого и удобного API. Вот пример формы редактирования профиля, которую вы можете найти в
import { Form, Field } from «@leveluptuts/fresh»;
const securityQuestions = [
«What is your mother’s maiden name?»,
«What was the name of your first pet?»,
«What was the name of your first school?»
];
const handleSubmit = (data) => console.log (data) ;
function UserProfileForm () {
return (
) ;
}
Fresh предоставляет несколько настраиваемых компонентов, упрощающих создание форм. Компонент Fieldзаботится о привязке данных к входным данным формы, преобразовывая предоставленную вами метку в имя свойства в верблюжьем регистре для значения ввода. (Например, «Фамилия» становится lastNameв состоянии формы.)
Компонент Formоборачивает все поля и принимает onSubmitобратный вызов, который получает данные формы как объект. Ниже приведен пример вывода из формы:
{
firstName: «Bill»,
lastName: «Gates»,
email: «billg@microsoft.com»,
securityQuestion: «What was the name of your first pet?»,
securityAnswer: «Fluffy»,
bio: «Bill Gates is a technologist, business leader, and philanthropist. He grew up in Seattle, Washington, with an amazing and supportive family who encouraged his interest in computers at an early age.»
}
Как видите, подобные библиотеки действительно могут ускорить работу с формами и сделать ваши компоненты намного менее подробными. Для
Вывод
Теперь у вас должно быть четкое представление о том, как формы и входные данные можно использовать в React. Вы должны знать разницу между контролируемыми и неконтролируемыми входными данными, а также плюсы и минусы каждого из них, зная, что плотный цикл обновления контролируемого ввода предоставляет вам множество вариантов форматирования и проверки значений на лету. Наконец, вы должны знать, что существуют доступные библиотеки форм, которые избавят вас от необходимости добавлять много повторяющегося и многословного стандартного кода в ваши формы React, что поможет вам стать более продуктивным разработчиком.
