Работа с формами
Хотя в React мы можем использовать все стандартные элементы форм, которые есть в html, однако здесь эти элементы приобретают дополнительные возможности. Рассмотрим, как работать с формами в React.
Определим на веб-странице следующий код:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Формы в React</title>
</head>
<body>
<div id="app"></div>
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
class UserForm extends React.Component {
constructor(props) {
super(props);
this.state = {name: ""};
this.onChange = this.onChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
onChange(e) {
var val = e.target.value;
this.setState({name: val});
}
handleSubmit(e) {
e.preventDefault();
alert("Имя: " + this.state.name);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<p>
<label>Имя:</label><br />
<input type="text" value={this.state.name} onChange={this.onChange}/>
</p>
<input type="submit" value="Отправить" />
</form>
);
}
}
ReactDOM.createRoot(
document.getElementById("app")
)
.render(
<UserForm />
);
</script>
</body>
</html>
Определенный здесь компонент UserForm представляет форму для ввода имени пользователя с возможностью условной отправки.
Чтобы контролировать введенные значения, в конструкторе устанавливается объект state:
this.state = {name: ""};
При определении поля ввода каждое поле связывается с определенным значением в state:
<input type="text" value={this.state.name} onChange={this.onChange} />
Так, источником значения для поля ввода имени является объект this.state.name.
Для отслеживания изменений в поле ввода нам надо определить обработчик для события change с помощью атрибута onChange. Этот обработчик будет срабатывать при каждом нажатии клавиши клавиатуры. Если мы не определим для поля подобный обработчик, то это поле ввода будет доступно только для чтения.
Суть каждого обработчика заключается в изменении значений в this.state:
onChange(e) {
var val = e.target.value;
this.setState({name: val});
}
С помощью e.target.value получаем введенное значение. После обновления новое значение this.state.name отобразится в поле ввода.
Для условной отправки устанавливаем обработчик у формы для события submit, который выводит в окне введенные значения.
- Глава 1. Введение в React
- Глава 2. Основы React
- Глава 3. Состояние. Управление компонентами-классами
- Глава 4. Хуки. Управление функциональными компонентами
- Глава 5. Маршрутизация
- Глава 6. Flux и Redux
- Глава 7. Дополнительные статьи