Чтобы получить значение ввода формы при отправке в React:
- Создайте переменную состояния для хранения значения ввода.
- Установите обработчик событий
onChange
для ввода, чтобы обновлять переменную состояния при изменении значения ввода. - Установите обработчик события
onSubmit
для элементаform
. - Получите доступ к значению поля ввода в обработчике событий
onSubmit
.
Например:
App.js
import { useState } from 'react';
export default function App() { const [firstName, setFirstName] = useState(''); const [lastName, setLastName] = useState(''); const [message, setMessage] = useState('');
const handleSubmit = (event) => { event.preventDefault();
setMessage(`Hello ${firstName} ${lastName}!`); setFirstName(''); setLastName(''); };
return ( <form onSubmit={handleSubmit}> <input type="text" id="firstName" name="firstName" value={firstName} placeholder="First Name" onChange={(event) => setFirstName(event.target.value) } />
<br /> <br />
<input type="text" id="lastName" name="lastName" value={lastName} placeholder="Last Name" onChange={(event) => { setLastName(event.target.value); }} />
<br /> <br />
<button type="submit">Submit</button>
<br /> <br />
<h2>{message}</h2> </form> ); }
С помощью хука useState()
мы создаем переменную состояния для хранения текущего значения каждого поля ввода. Мы также создали еще одну переменную состояния (message
), которая будет обновляться значениями полей ввода после того, как пользователь отправит форму.
Мы устанавливаем встроенный обработчик событий onChange
для каждого поля ввода, чтобы обработчик вызывался при каждом изменении поля ввода. В каждом обработчике мы используем свойство target
объекта Event
, который обработчик получает для доступа к объекту элемента input
. Свойство value
этого объекта содержит входное значение, поэтому мы передаем его функции обновления состояния, чтобы обновить значение этого конкретного ввода.
Элемент button
в форме имеет type
из submit
, поэтому каждый раз, когда пользователь щелкает его, запускается событие отправки. Мы устанавливаем обработчик события onSubmit
в форме для прослушивания этого события. В этом обработчике мы вызываем preventDefault()
для объекта Event
, чтобы предотвратить обновление страницы при отправке формы.
Чтобы получить входные значения в этом обработчике событий после отправки формы, мы просто обращаемся к переменным состояния firstName
и lastName
.
Получить входное значение при отправке формы с помощью event.target
Мы также можем получить значение ввода формы при отправке, используя свойство target
объекта Event
. Это полезно в тех случаях, когда мы не отслеживаем входное значение с помощью переменной состояния, т. е. неконтролируемый ввод.
App.js
import { useState } from 'react';
export default function App() { const [message, setMessage] = useState('');
const handleSubmit = (event) => { event.preventDefault();
const firstName = event.target.firstName.value; const lastName = event.target.lastName.value; setMessage(`Hello ${firstName} ${lastName}!`);
event.target.reset(); };
return ( <form onSubmit={handleSubmit}> <input type="text" id="firstName" name="firstName" placeholder="First Name" />
<br /> <br />
<input type="text" id="lastName" name="lastName" placeholder="Last Name" />
<br /> <br />
<button type="submit">Submit</button>
<br /> <br />
<h2>{message}</h2> </form> ); }
В обработчике событий onSubmit
свойство target
объекта Event
возвращает объект элемента формы (типа HTMLFormElement
).
Поскольку мы устанавливаем реквизит name
для элемента input
, объект элемента формы будет содержать свойство с тем же именем, которое возвращает объект элемента input
, т. е. после установки name
в firstName
для элемента input
мы можем получить доступ к объекту элемента для этого input
со свойством firstName
объекта элемента form
.
После получения значения каждого ввода и отображения сообщения мы вызываем метод reset()
для объекта элемента формы, чтобы восстановить значения по умолчанию для элементов ввода формы. Вот как мы очищаем текст в полях ввода в этом примере, поскольку они не контролируются переменными состояния.
Получить входное значение при отправке формы с ссылкой
Мы также можем использовать ссылку на компонент, чтобы получить значение неконтролируемого ввода формы при отправке.
App.js
import { useState, useRef } from 'react';
export default function App() { const [message, setMessage] = useState(''); const firstNameRef = useRef(undefined); const lastNameRef = useRef(undefined);
const handleSubmit = (event) => { event.preventDefault();
const firstName = firstNameRef.current.value; const lastName = lastNameRef.current.value;
setMessage(`Hello ${firstName} ${lastName}!`);
event.target.reset(); };
return ( <form onSubmit={handleSubmit}> <input type="text" id="firstName" name="firstName" placeholder="First Name" ref={firstNameRef} />
<br /> <br />
<input type="text" id="lastName" name="lastName" placeholder="Last Name" ref={lastNameRef} />
<br /> <br />
<button type="submit">Submit</button>
<br /> <br />
<h2>{message}</h2> </form> ); }
Данные в контролируемом вводе обрабатываются состоянием React, но в случае неконтролируемого ввода они обрабатываются самой DOM. Вот почему input
в приведенном выше примере не имеет установленного реквизита value
или обработчика событий onChange
. Вместо этого мы получаем доступ к значению поля ввода с помощью React ref. DOM обновляет это значение при изменении текста на входе.
Для каждого input
мы создаем объект ref с хуком useRef()
и устанавливаем его в ref
реквизит input
. При этом для свойства current
объекта ref устанавливается объект DOM, представляющий элемент input
.
useRef()
возвращает изменяемый объект ref, значение которого не меняется при обновлении компонента. Кроме того, изменение значения свойства current
этого объекта не приводит к повторному рендерингу. Это отличается от функции обновления setState
, возвращаемой из useState()
.
Хотя документация React рекомендует использовать контролируемые компоненты, неконтролируемые компоненты имеют некоторые преимущества. Вы можете предпочесть их, если форма очень проста и не требует мгновенной проверки, а доступ к значениям требуется только при отправке формы.
Первоначально опубликовано на codingbeautydev.com
Все сумасшедшие вещи, которые делает JavaScript
Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.
Зарегистрируйтесь и немедленно получите бесплатную копию.