Реагировать на формы
Как и в HTML, React использует формы, позволяющие пользователям взаимодействовать с веб-страницей.
Добавление форм в React
Вы добавляете форму с помощью React, как и любой другой элемент:
Пример:
Добавьте форму, позволяющую пользователям вводить свое имя:
function MyForm() {
return (
<form>
<label>Enter your name:
<input type="text" />
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Это будет работать как обычно, форма будет отправлена, и страница обновится.
Но, как правило, это не то, чего мы хотим в React.
Мы хотим предотвратить это поведение по умолчанию и позволить React управлять формой.
Обработка форм
Обработка форм — это то, как вы обрабатываете данные, когда они изменяют значение или отправляются.
В HTML данные формы обычно обрабатываются DOM.
В React данные формы обычно обрабатываются компонентами.
Когда данные обрабатываются компонентами, все данные сохраняются в состоянии компонента.
Вы можете контролировать изменения, добавляя обработчики событий в
onChange
атрибут.
Мы можем использовать useState
хук, чтобы отслеживать каждое входное значение и предоставлять «единый источник правды» для всего приложения.
Дополнительную информацию о хуках см. в разделе React Hooks.
Пример:
Используйте onChange
хук для управления вводом:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
return (
<form>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Получите сертификат!
ЗАПИСАТЬСЯ НА 95 $
Отправка форм
Вы можете управлять действием отправки, добавив обработчик событий в onSubmit
атрибут для <form>
:
Пример:
Добавьте кнопку отправки и обработчик события в onSubmit
атрибуте:
import { useState } from "react";
import ReactDOM from 'react-dom';
function MyForm() {
const [name, setName] = useState("");
const handleSubmit = (event) => {
event.preventDefault();
alert(`The name you entered was: ${name}`)
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Несколько полей ввода
Вы можете управлять значениями более чем одного поля ввода, добавляя
name
атрибут к каждому элементу.
Мы инициализируем наше состояние пустым объектом.
Для доступа к полям в обработчике событий используйте
синтаксис event.target.name
and
.event.target.value
Чтобы обновить состояние, используйте квадратные скобки [обозначение скобок] вокруг имени свойства.
Пример:
Напишите форму с двумя полями ввода:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [inputs, setInputs] = useState({});
const handleChange = (event) => {
const name = event.target.name;
const value = event.target.value;
setInputs(values => ({...values, [name]: value}))
}
const handleSubmit = (event) => {
event.preventDefault();
alert(inputs);
}
return (
<form onSubmit={handleSubmit}>
<label>Enter your name:
<input
type="text"
name="username"
value={inputs.username || ""}
onChange={handleChange}
/>
</label>
<label>Enter your age:
<input
type="number"
name="age"
value={inputs.age || ""}
onChange={handleChange}
/>
</label>
<input type="submit" />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Примечание. Мы используем одну и ту же функцию обработчика событий для обоих полей ввода, мы могли бы написать один обработчик событий для каждого, но это дает нам более чистый код и является предпочтительным способом в React.
Текстовое поле
Элемент textarea в React немного отличается от обычного HTML.
В HTML значением textarea был текст между начальным
<textarea>
и конечным тегами </textarea>
.
<textarea>
Content of the textarea.
</textarea>
В React значение textarea помещается в атрибут value. Мы будем использовать useState
хук для управления значением textarea:
Пример:
Простое текстовое поле с некоторым содержимым:
import { useState } from "react";
import ReactDOM from "react-dom";
function MyForm() {
const [textarea, setTextarea] = useState(
"The content of a textarea goes in the value attribute"
);
const handleChange = (event) => {
setTextarea(event.target.value)
}
return (
<form>
<textarea value={textarea} onChange={handleChange} />
</form>
)
}
ReactDOM.render(<MyForm />, document.getElementById('root'));
Выбирать
Выпадающий список или поле выбора в React также немного отличается от HTML.
в HTML выбранное значение в раскрывающемся списке определялось selected
атрибутом:
HTML:
<select>
<option value="Ford">Ford</option>
<option value="Volvo" selected>Volvo</option>
<option value="Fiat">Fiat</option>
</select>
В React выбранное значение определяется value
атрибутом select
тега:
Пример:
Простое поле выбора, где выбранное значение «Вольво» инициализируется в конструкторе:
function MyForm() {
const [myCar, setMyCar] = useState("Volvo");
const handleChange = (event) => {
setMyCar(event.target.value)
}
return (
<form>
<select value={myCar} onChange={handleChange}>
<option value="Ford">Ford</option>
<option value="Volvo">Volvo</option>
<option value="Fiat">Fiat</option>
</select>
</form>
)
}
Внеся эти небольшие изменения в <textarea>
и <select>
, React сможет одинаково обрабатывать все элементы ввода.