Шаблоны корпоративных сайтов
11 175 р.
14 900 р.
App
, с которого мы начнём сегодняшние эксперименты:import React, {Component} from "react"
class App extends Component {
constructor() {
super()
this.state = {
firstName: "",
lastName: ""
}
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
const {name, value} = event.target
this.setState({
[name]: value
})
}
render() {
return (
<form>
<input
type="text"
value={this.state.firstName}
name="firstName"
placeholder="First Name"
onChange={this.handleChange}
/>
<br />
<input
type="text"
value={this.state.lastName}
name="lastName"
placeholder="Last Name"
onChange={this.handleChange}
/>
{
/**
* Другие полезные элементы форм:
*
* <textarea />
* <input type="checkbox" />
* <input type="radio" />
* <select> и <option>
*/
}
<h1>{this.state.firstName} {this.state.lastName}</h1>
</form>
)
}
}
export default App
textarea
. Вероятно, понять то, как с ним работать, легче всего. Если вы раньше, строя обычные HTML-формы, уже пользовались этим элементом, вы знаете, что это — не самозакрывающийся тег, как было в случае с элементом input
. У него есть открывающая и закрывающая части.<br />
<textarea></textarea>
rows
и cols
можно, при описании этого элемента, указывать его размеры. В обычном HTML, если нужно, чтобы после вывода этого поля в нём уже был какой-то текст, делается это путём ввода нужного текста между открывающим и закрывающим тегами элемента. В React работа с такими элементами сделана максимально похожей на работу с элементами input
, о которых мы говорили в прошлый раз. А именно, в React тег textarea
является самозакрывающимся. То есть код для вывода поля на страницу можно изменить следующим образом:<textarea />
value
, причём, работа с ним осуществляется точно так же, как и с таким же атрибутом обычных текстовых полей. Благодаря этому достигается единообразие в работе с разными элементами, и, кроме того, облегчается обновление содержимого полей путём обновления свойств состояния, привязанных к таким полям. Приведём состояние кода поля к такому виду:<textarea value={"Some default value"}/>
input
, в качестве типа которого указан checkbox
. Вот как выглядит его описание:<input type="checkbox" />
value
. Его применяют для того, чтобы предоставить пользователю выбор их неких двух вариантов, один из которых соответствует установленному флажку, а другой — снятому. Для отслеживания того, установлен флажок или снят, используется атрибут checked
, который описывается логическим значением. В результате флажкам обычно соответствуют логические свойства, хранящиеся в состоянии.this.state = {
firstName: "",
lastName: "",
isFriendly: true
}
<input
type="checkbox"
checked={this.state.isFriendly}
/>
isFriendly
установлено в true
, не даёт этого сделать. При этом в консоль будет выводиться предупреждение о том, что мы не предусмотрели механизм изменения поля (обработчик события onChange
) и оно выведено в состоянии «только для чтения».handleChange()
. Сейчас он используется для работы с текстовыми полями. Подумаем о том, как воспользоваться им и для работы с флажком. Для этого сначала назначим вышеуказанный метод в качестве обработчика события onChange
флажка и назначим флажку имя, соответствующее имени свойства состояния, относящегося к флажку. Кроме того, подпишем флажок, воспользовавшись тегом label
:<label>
<input
type="checkbox"
name="isFriendly"
checked={this.state.isFriendly}
onChange={this.handleChange}
/> Is friendly?
</label>
handleChange()
, код которого показан ниже, мы, при работе с текстовыми полями, выясняли имя элемента (name
) и его содержимое (value
), после чего обновляли состояние, записывая в него то, что было у поля с определённым именем в его атрибуте value
:handleChange(event) {
const {name, value} = event.target
this.setState({
[name]: value
})
}
value
у которого нет. У него есть лишь атрибут checked
, который может принимать только значения true
или false
. В результате нам, для того чтобы использовать метод handleChange()
для работы с флажком, нужно проверить, является ли элемент, для которого вызван этот обработчик, флажком. Для того чтобы выполнить эту проверку — вспомним, что в качестве типа (type
) элемента input
, представляющего флажок, задано значение checkbox
. Для того чтобы проверить это значение, можно обратиться к свойству type
элемента event.target
. Извлечём это свойство из event.target
, а также — свойство checked
, воспользовавшись следующей конструкцией:const {name, value, type, checked} = event.target
type
и выяснить, является ли элемент, для которого вызван обработчик события, флажком. Если это так — мы запишем в состояние то, что оказалось в константе checked
. Не забудем при этом сохранить код, ответственный за работу с текстовыми полями. В результате код handleChange()
приобретёт следующий вид:handleChange(event) {
const {name, value, type, checked} = event.target
type === "checkbox" ? this.setState({ [name]: checked }) : this.setState({ [name]: value })
}
<textarea
value={"Some default value"}
onChange={this.handleChange}
/>
input
типов text
и checkbox
. Здесь имеется в виду то, что у переключателей есть и атрибут value
, и атрибут checked
. Добавим в нашу форму пару переключателей, создав их код на основе кода описания флажка. Вот как это выглядит:<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.isFriendly}
onChange={this.handleChange}
/> Male
</label>
<br />
<label>
<input
type="radio"
name="gender"
value="female"
checked={this.state.isFriendly}
onChange={this.handleChange}
/> Female
</label>
gender
. Переключатели с одним и тем же именем формируют группу. Выбранным может быть лишь один переключатель, входящий в такую группу.checked
устанавливается, скажем, в true
, если некое свойство состояния равняется true
. Переключатели должны поддерживать синхронизированное, в пределах группы, изменение собственного состояния. Вместо этого значение checked
переключателей устанавливается по условию. Это условие в нашем случае будет представлено сравнением свойства состояния this.state.gender
со строкой male
или female
. В коде описания переключателей это выглядит так:<label>
<input
type="radio"
name="gender"
value="male"
checked={this.state.gender === "male"}
onChange={this.handleChange}
/> Male
</label>
<br />
<label>
<input
type="radio"
name="gender"
value="female"
checked={this.state.gender === "female"}
onChange={this.handleChange}
/> Female
</label>
gender
, инициализировав его пустой строкой:this.state = {
firstName: "",
lastName: "",
isFriendly: false,
gender: ""
}
<h2><font color="#3AC1EF">You are a {this.state.gender}</font></h2>
You are a
, но мы этого делать не будем, хотя вы вполне можете реализовать это самостоятельно. Взглянем теперь на то, что у нас получилось.<select>
<option></option>
<option></option>
<option></option>
<select/>
value
. Это позволяет легко выяснить то, какой именно элемент списка выбран, и, кроме того, это облегчает работу с состоянием компонента.value
элемента select
можно поместить следующую конструкцию: value={this.state.favColor}
. Сюда будут попадать те значения, которые будет выбирать пользователь. Теперь добавим favColor
в состояние:this.state = {
firstName: "",
lastName: "",
isFriendly: false,
gender: "",
favColor: "blue"
}
onChange
и дадим ему имя. Также назначим значения value
элементам options
поля со списком и введём текст, который будет выводиться в поле.select
с подписью:<label>Favorite Color:</label>
<select
value={this.state.favColor}
onChange={this.handleChange}
name="favColor"
>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="orange">Orange</option>
<option value="yellow">Yellow</option>
</select>
<h2><font color="#3AC1EF">Your favorite color is {this.state.favColor}</font></h2>
handleChange()
заключается в том, что нам приходится по-особенному обрабатывать события флажка.<button>Submit</button>
button
, он будет действовать как старый элемент input
с типом submit
. Если по этой кнопке щёлкнуть — будет вызвано событие самой формы onSubmit
. Если нужно что-то сделать после завершения заполнения формы, можно добавить обработчик события onClick
к кнопке, но, например, лично я предпочитаю обрабатывать подобные события на уровне формы, назначая ей обработчик события onSubmit
:<form onSubmit={this.handleSubmit}>