Работа с формами и элементами форм при разработке с помощью React может быть сложной, поскольку элементы HTML-форм ведут себя в React несколько иначе, чем другие элементы DOM.
Узнайте, как работать с формами и элементами форм, такими как флажки, текстовые области и однострочные вводы текста.
Управление полями ввода в формах
В React управление полем ввода в форме часто осуществляется путем создания состояния и привязки его к полю ввода.
Например:
функцияПриложение() {const [firstName, setFirstName] = React.useState('');
функциядескрипторFirstNameChange(событие) {
setFirstName( событие.цель.ценить )
}
возвращаться (
<форма>
<тип ввода='текст' заполнитель ='Имя' onInput={handleFirstNameChange} />
</form>
)
}
Выше у нас есть имя государство, onInput событие, и ручка изменения обработчик. ручка изменения функция запускается при каждом нажатии клавиши для обновления имя состояние.
Такой подход может быть идеальным при работе с одним полем ввода, но при создании разных состояний и функции обработчика для каждого элемента ввода станут повторяющимися при работе с несколькими входными данными. поля.
Чтобы избежать написания повторяющегося и избыточного кода в таких ситуациях, дайте каждому полю ввода отдельное имя, установите объект в качестве начального значения состояния вашей формы, а затем заполните объект свойствами с теми же именами, что и ввод поля.
Например:
функцияПриложение() {константа [formData, setFormData] = React.useState(
{
имя: '',
фамилия: ''
}
);
возвращаться (
<форма>
<тип ввода='текст' заполнитель ='Имя' имя='имя' />
<тип ввода='текст' заполнитель ='Фамилия' имя='фамилия' />
</form>
)
}
formData будет служить переменной состояния для управления и обновления всех полей ввода внутри формы. Убедитесь, что имена свойств в объекте состояния идентичны именам входных элементов.
Чтобы обновить состояние входными данными, добавьте onInput прослушиватель событий для элемента ввода, затем вызовите созданную функцию-обработчик.
Например:
функцияПриложение() {константа [formData, setFormData] = React.useState(
{
имя: '',
фамилия: ''
}
);
функцияручка изменения(событие) {
setFormData((предыдущее состояние) => {
возвращаться {
...prevState,
[событие.цель.имя]: событие.цель.ценить
}
})
}
возвращаться (
<форма>
<вход
тип='текст'
заполнитель ='Имя'
имя='имя'
onInput={handleChange}
/>
<вход
тип='текст'
заполнитель ='Фамилия'
имя='фамилия'
onInput={handleChange}
/>
</form>
)
}
Блок кода выше использовал onInput событие и функция-обработчик, дескрипторFirstNameChange. Этот дескрипторFirstNameChange функция будет обновлять свойства состояния при вызове. Значения свойств состояния будут такими же, как у соответствующих входных элементов.
Преобразование ваших входных данных в контролируемые компоненты
Когда HTML-форма отправляется, ее поведение по умолчанию заключается в переходе на новую страницу в браузере. Такое поведение неудобно в некоторых ситуациях, например, когда вы хотите проверить данные, введенные в форму. В большинстве случаев вам будет удобнее иметь функцию JavaScript с доступом к информации, введенной в форму. Этого можно легко добиться в React, используя контролируемые компоненты.
В файлах index.html элементы формы отслеживают свое состояние и изменяют его в ответ на действия пользователя. В React функция установки состояния изменяет динамическое состояние, хранящееся в свойстве состояния компонента. Вы можете объединить два состояния, сделав состояние React единственным источником истины. Таким образом, компонент, который создает форму, контролирует, что происходит, когда пользователь вводит данные. Элементы формы ввода со значениями, которые контролирует React, называются контролируемыми компонентами или контролируемыми входами.
Чтобы использовать контролируемые входные данные в вашем приложении React, добавьте свойство value к вашему элементу ввода:
функцияПриложение() {константа [formData, setFormData] = React.useState(
{
имя: '',
фамилия: ''
}
);
функцияручка изменения(событие) {
setFormData((предыдущее состояние) => {
возвращаться {
...prevState,
[событие.цель.имя]: событие.цель.ценить
}
})
}
возвращаться (
<форма>
<вход
тип='текст'
заполнитель ='Имя'
имя='имя'
onInput={handleChange}
значение = {formData.firstName}
/>
<вход
тип='текст'
заполнитель ='Фамилия'
имя='фамилия'
onInput={handleChange}
значение = {formData.lastName}
/>
</form>
)
}
Атрибуты значений входных элементов теперь устанавливаются как значения соответствующих свойств состояния. Значение входа всегда определяется состоянием при использовании управляемого компонента.
Обработка элемента ввода Textarea
текстовая область element подобен любому обычному элементу ввода, но содержит многострочные вводы. Это полезно при передаче информации, которая требует более одной строки.
В файле index.html тег текстовой области элемент определяет свое значение своими дочерними элементами, как показано в блоке кода ниже:
<текстовая область>
Привет, как дела?
</textarea>
С React, чтобы использовать текстовая область элемент, вы можете создать элемент ввода с типом текстовая область.
Вот так:
функцияПриложение() {возвращаться (
<форма>
<тип ввода='текстовая область' имя='сообщение'/>
</form>
)
}
Альтернатива использованию текстовая область в качестве типа ввода использовать текстовая область тег элемента вместо тега типа ввода, как показано ниже:
функцияПриложение() {возвращаться (
<форма>
<текстовая область
имя='сообщение'
значение ='Привет, как дела?'
/>
</form>
)
}
текстовая область тег имеет атрибут value, который содержит информацию о пользователе, введенную в текстовая область элемент. Это заставляет его работать как элемент ввода React по умолчанию.
Работа с элементом ввода React Checkbox
Немного по-другому обстоит дело при работе с флажок входы. Поле ввода типа флажок не имеет атрибута value. Тем не менее, он имеет проверил атрибут. Этот проверил Атрибут отличается от атрибута значения тем, что требует логического значения, чтобы определить, установлен флажок или нет.
Например:
функцияПриложение() {возвращаться (
<форма>
<тип ввода='флажок' идентификатор ='присоединение' имя='присоединиться' />
<метка htmlFor='присоединение'>Хотите присоединиться к нашей команде?</label>
</form>
)
}
Элемент метки ссылается на идентификатор элемента ввода с помощью htmlДля атрибут. Этот htmlДля атрибут принимает идентификатор входного элемента — в данном случае присоединение. Когда создание HTML-формы, htmlДля атрибут представляет для атрибут.
флажок лучше использовать как управляемый вход. Этого можно добиться, создав состояние и присвоив ему начальное логическое значение true или false.
Вы должны включить два реквизита на флажок элемент ввода: а проверил имущество и по изменению событие с функцией обработчика, которая будет определять значение состояния, используя setIsChecked() функция.
Например:
функцияПриложение() {константа [isChecked, setIsChecked] = React.useState(ЛОЖЬ);
функцияручка изменения() {
setIsChecked ((предыдущее состояние) => !prevState )
}
возвращаться (
<форма>
<вход
тип='флажок'
идентификатор ='присоединение'
имя='присоединиться'
проверено={проверено}
onChange={handleChange}
/>
<метка htmlFor='присоединение'>Хотите присоединиться к нашей команде?</label>
</form>
)
}
Этот блок кода генерирует проверено состояние и устанавливает его начальное значение равным ЛОЖЬ. Он устанавливает значение проверено к проверил атрибут в элементе ввода. ручка изменения функция сработает и изменит значение состояния проверено на его противоположность всякий раз, когда вы нажимаете на флажок.
Элемент формы, вероятно, может содержать несколько элементов ввода разных типов, таких как флажки, текст и т. д.
В таких случаях вы можете обрабатывать их так же, как вы обрабатывали несколько элементов ввода одного типа.
Вот пример:
функцияПриложение() {позволять[formData, setFormData] = React.useState(
{
имя: ''
присоединиться: истинный,
}
);
функцияручка изменения(событие) {
константа {имя, значение, тип, проверено} = event.target;
setFormData((предыдущее состояние) => {
возвращаться {
...prevState,
[имя]: тип флажок? проверено: значение
}
})
}
возвращаться (
<форма>
<вход
тип='текст'
заполнитель ='Имя'
имя='имя'
onInput={handleChange}
значение = {formData.firstName}
/>
<вход
тип='флажок'
идентификатор ='присоединение'
имя='присоединиться'
проверено={formData.join}
onChange={handleChange}
/>
<метка htmlFor='присоединение'>Хотите присоединиться к нашей команде?</label>
</form>
)
}
Обратите внимание, что в ручка изменения функция, setFormData использует тернарный оператор для присвоения значения проверил свойство к свойствам состояния, если целевой тип ввода является флажок. Если нет, он присваивает значения ценить атрибут.
Теперь вы можете обрабатывать формы React
Здесь вы узнали, как работать с формами в React, используя различные элементы ввода формы. Вы также узнали, как применять контролируемые входные данные к элементам формы, добавляя свойство значения или проверенное свойство при работе с флажками.
Эффективная обработка элементов ввода формы React повысит производительность вашего приложения React, что приведет к лучшему всестороннему взаимодействию с пользователем.
