Продвинутая работа с формами в фреймворке React

Сейчас мы начнем разбираться с более сложными элементами формы: с textarea, с чекбоксами, селектами и радио кнопочками.

Работа с textarea

Работа с текстареа осуществляется очень похожим на работу с инпутом образом - также добавляется атрибут value и событие onChange.

Запустите следующий код - и вы увидите на экране textarea, в который можно будет повводить текст. Все изменения будут отображаться в абзаце над нашим textarea:

class App extends React.Component {
	constructor() {
		super();
		this.state = {value: 'привет'};
	}

	//Записываем value текстареа в this.state.value:
	handleChange(event) {
		this.setState({value: event.target.value});
	}

	render() {
		return <div>
			<p>текст: {this.state.value}</p>
			<textarea value={this.state.value} onChange={this.handleChange.bind(this)} />
		</div>;
	}
}

Обратите внимание: React подход отличается подхода на чистом JavaScript. На чистом JS у текстареа нет атрибута value, кроме того, в чистом JS текстареа должен иметь закрывающий тег: <textarea></textarea>, но в реакте мы пишем так: <textarea /> - подобно работе с инпутом.

Чекбоксы

Работа с чекбоксами также осуществляется по схожему принципу, только вместо атрибута value мы указываем атрибут checked.

Если в этот атрибут передать true - то чекбокс будет отмечен, а если false - не будет отмечен:

return <div>
	<input
		type="checkbox"
		checked={тут должно быть true или false}
	/>
</div>;

Конечно же, обычно в checked передается стейт, который может принимать только два значения: или true, или false. Пусть для примера это будет стейт this.state.checked:

return <div>
	<input
		type="checkbox"
		checked={this.state.checked}
	/>
</div>;

Так же, как и при работе с инпутами, если жестко задать значение атрибута checked - состояние чекбокса нельзя будет сменить.

Для решения этой проблемы поступим так: будем по изменению чекбокса менять this.state.checked на противоположное ему значение, то есть на !this.state.checked.

Давайте сделаем это. Добавим в наш чекбокс атрибут onChange, к которому привяжем метод handleCheckboxChange:

return <div>
	<input
		type="checkbox"
		checked={this.state.checked}
		onChange={this.handleCheckboxChange.bind(this)}
	/>
</div>;

Напишем реализацию метода handleCheckboxChange:

handleCheckboxChange(event) {
	this.setState({checked: !this.state.checked});
}

Давайте соберем все вместе и запустим:

class App extends React.Component {
	constructor() {
		super();
		this.state = {checked: true};
	}

	//Меняем this.state.checked на противоположный:
	handleCheckboxChange(event) {
		this.setState({checked: !this.state.checked});
	}

	render() {
		return <div>
			<input
				type="checkbox"
				checked={this.state.checked}
				onChange={this.handleCheckboxChange.bind(this)}
			/>
		</div>;
	}
}

Запустите этот код и понажимайте на чекбокс - теперь при нажатии состояние чебокса будет меняться.

Давайте теперь сделаем так, чтобы состояние чекбокса выводилось на экран. Напрямую, вот так - {this.state.checked} - это сделать нельзя, так как там содержится логическое значение.

Воспользуемся тернарным оператором и сделаем так, чтобы если чекбокс отмечен - на экран выводилась строка 'отмечен', а в противном случае - 'не отмечен':

<p>Состояние: {this.state.checked ? 'отмечен' : 'не отмечен'}</p>

Добавим изменения в наш код:

class App extends React.Component {
	constructor() {
		super();
		this.state = {checked: true};
	}

	//Меняем this.state.checked на противоположный:
	handleCheckboxChange(event) {
		this.setState({checked: !this.state.checked});
	}

	render() {
		return <div>
			<p>Состояние: {this.state.checked ? 'отмечен' : 'не отмечен'}</p>
			<input
				type="checkbox"
				checked={this.state.checked}
				onChange={this.handleCheckboxChange.bind(this)}
			/>
		</div>;
	}
}

Запустите этот код и понажимайте на чекбокс - вы увидите, как в абзаце выводится текущее состояние чекбокса.

Селекты

Давайте теперь займемся выпадающими списками select. Работа с ними также практически не отличается от работы с инпутами и чекбоксами.

Пусть мы хотим сделать вот такой селект:

<select>
	<option>html</option>
	<option>css</option>
	<option>javascript</option>
	<option>php</option>
</select>

Давайте сделаем его. Добавим ему в value стейт this.state.value, а к событию onChange привяжем метод handleSelectChange. В общем, делаем все, как обычно:

render() {
	return <div>
		<select
				value={this.state.value}
				onChange={this.handleSelectChange.bind(this)}
		>

				<option>html</option>
				<option>css</option>
				<option>javascript</option>
				<option>php</option>

		</select>
	</div>;
}

Напишем реализацию метода handleSelectChange:

handleSelectChange(event) {
	this.setState({value: event.target.value});
}

В this.state.value положим значение 'javascript' - в этом случае по умолчанию будет выбран именно этот пункт списка:

constructor() {
	super();
	this.state = {value: 'javascript'};
}

Сделаем также абзац, в который будет выводиться выбранный пункт списка:

<p>Ваш выбор: {this.state.value}</p>

Давайте соберем все вместе и запустим. Изначально выбран будет пункт списка со значением 'javascript' и этот выбор будет отражаться в нашем абзаце. Но если выбор поменять - в абзаце он тоже поменяется:

class App extends React.Component {
	constructor() {
		super();
		this.state = {value: 'javascript'};
	}

	//Изменяем this.state.value при изменении селекта:
	handleSelectChange(event) {
		this.setState({value: event.target.value});
	}

	render() {
		return <div>
			<p>Ваш выбор: {this.state.value}</p>
			<select
				value={this.state.value}
				onChange={this.handleSelectChange.bind(this)}
			>

				<option>html</option>
				<option>css</option>
				<option>javascript</option>
				<option>php</option>

			</select>
		</div>;
	}
}

Запустите этот код и проверьте, что все работает, как и описано.

Продвинутая работа с селектами

Давайте теперь тегам option дадим атрибут value, как это обычно и делается:

<select>
	<option value="0">Язык HTML</option>
	<option value="1">Язык CSS</option>
	<option value="2">Язык JavaScript</option>
	<option value="3">Язык PHP</option>
</select>

На самом деле без атрибута value, как это было сделано выше - плохо. Почему плохо: ведь текст option может меняться и это повлияет на работу нашего скрипта. К примеру, вместо текста 'javascript' мы сделаем текст 'Язык JavaScript' и теперь строчка this.state = {value: 'javascript'} просто не будет работать.

А вот если мы привяжемся к value и напишем this.state = {value: 2} - все будет работать независимо от того, что написано в самом тексте тега option.

Давайте добавим атрибуты value нашим тегам option:

class App extends React.Component {
	constructor() {
		super();
		this.state = {value: 0};
	}

	//Изменяем this.state.value при изменении селекта:
	handleSelectChange(event) {
		this.setState({value: event.target.value});
	}

	render() {
		return <div>
			<p>Ваш выбор: {this.state.value}</p>
			<select
				value={this.state.value}
				onChange={this.handleSelectChange.bind(this)}
			>

				<option value="0">Язык HTML</option>
				<option value="1">Язык CSS</option>
				<option value="2">Язык JavaScript</option>
				<option value="3">Язык PHP</option>

			</select>
		</div>;
	}
}

Запустите этот код и повыбирайте разные значения в селекте. Вы увидите проблему - в абзац будет выводится не значение тега option, а значение атрибута value!

Итак, если вы запустите этот код, то увидите проблему - строка <p>Ваш выбор: {this.state.value}</p> будет выводить value нашего option, а никак не значение.

Для того, чтобы поправить эту проблему (она пока не исчезнет, об этом ниже), вначале сделаем следующее: не будем создавать теги option вручную, а сделаем массив this.state.langs и из этого массива и сформируем наш селект, вот так:

class App extends React.Component {
	constructor() {
		super();
		this.state = {
			value: 'html',
			langs: [
				'Язык HTML',
				'Язык CSS',
				'Язык JavaScript',
				'Язык PHP',
			]
		};
	}

	//Изменяем this.state.value при изменении селекта:
	handleSelectChange(event) {
		this.setState({value: event.target.value});
	}

	render() {
		
		//Формируем в цикле набор из тегов <option>:
		const options = this.state.langs.map((item, index) => {
			return <option key={index} value={index}>{item}</option>;
		});

		return <div>
			<p>Ваш выбор: {this.state.value}</p>
			<select
				value={this.state.value}
				onChange={this.handleSelectChange.bind(this)}
			>

				{options}

			</select>
		</div>;
	}
}

Результатом этого кода будет следующее:

<select>
	<option value="0">Язык HTML</option>
	<option value="1">Язык CSS</option>
	<option value="2">Язык JavaScript</option>
	<option value="3">Язык PHP</option>
</select>

Сейчас у нас по-прежнему есть строка this.state.value, которая выводит value оптиона option, а не его значение:

<p>Ваш выбор: {this.state.value}</p>

Давайте поправим ее так, чтобы она подтягивала значение из массива this.state.langs по его ключу this.state.value:

<p>Ваш выбор: {this.state.langs[this.state.value]}</p>

Добавим эту строчку в наш код и теперь все будет ок:

class App extends React.Component {
	constructor() {
		super();
		this.state = {
			value: 0, //тут теперь задаем значение из атрибута value
			langs: [
				'Язык HTML',
				'Язык CSS',
				'Язык JavaScript',
				'Язык PHP',
			]
		};
	}

	//Изменяем this.state.value при изменении селекта:
	handleSelectChange(event) {
		this.setState({value: event.target.value});
	}

	render() {
		
		//Формируем в цикле набор из тегов <option>:
		const options = this.state.langs.map((item, index) => {
			return <option key={index} value={index}>{item}</option>;
		});

		return <div>
			<p>Ваш выбор: {this.state.langs[this.state.value]}</p>
			<select
				value={this.state.value}
				onChange={this.handleSelectChange.bind(this)}
			>

				{options}

			</select>
		</div>;
	}
}

Запустите этот код и повыбирайте значения в селекте - теперь в абзаце действительно будут появляется выбранные значения.

Радиокнопочки

Работа с радиокнопочками radio несколько отличается, к примеру, от тех же чекбоксов.

Проблема в том, что у нескольких радио будет один и тот же стейт, но разные value.

Поэтому работа происходит следующем образом: в атрибут value записывают значение радио, а в атрибут checked - специальное условие, которое проверяет, равен ли this.state.option определенному значению. Если равен - радиокнопочка станет отмеченной, а если не равен - будет не отмеченной.

Пример: пусть this.state.option - это стейт, в котором будет хранится значение радио. Сделаем 2 радиокнопочки и дадим одной value="option1", а второй - value="option2".

Тогда для проверки того, будет ли первая радиокнопочка отмечена, ей в атрибут checked запишем следующее: checked={this.state.option == 'option1'}.

Получится, что если в this.state.option лежит option1 первая радиокнопочка будет отмеченной, а если не лежит - то не будет.

Аналогичную строку запишем и для второй радиокнопочки - checked={this.state.option == 'option2'}, только здесь мы сравниванием this.state.option уже с option2.

Для каждой радио также напишем атрибут onChange и прикрепим к нему метод handleRadioChange. Ну, здесь все как обычно - так же, как для инпутов и чекбоксов.

Давайте соберем все вместе и запустим:

class App extends React.Component {
	constructor() {
		super();
		this.state = {option: 'option1'};
	}

	//Изменяет this.state.option при изменении радио:
	handleRadioChange(event) {
		this.setState({option: event.target.value});
	}

	render() {
		return <div>

			<p>Ваш выбор: {this.state.option}</p>

			<input
				name="lang"
				type="radio"
				value="option1"
				checked={this.state.option == 'option1'}
				onChange={this.handleRadioChange.bind(this)}
			/>

			<input
				name="lang"
				type="radio"
				value="option2"
				checked={this.state.option == 'option2'}
				onChange={this.handleRadioChange.bind(this)}
			/>

		</div>;
	}
}

Запустите этот код и понажимайте на радиокнопочки - вы будете видеть ваш выбор в соответствующем абзаце.

Значение по умолчанию

Иногда бывает следующая ситуация: вы хотите сделать так, чтобы по умолчанию в инпуте уже было какое-то значение.

При этом вы хотите, чтобы из стейта было взято только начальное значение инпута, а сам инпут не был бы привязан к этому стейту.

Способ сделать это есть: нужно воспользоваться атрибутом defaultValue:

class App extends React.Component {
	constructor() {
		super();
		this.state = {value: 'привет'};
	}

	render() {
		return <div>
			<input defaultValue={this.state.value} />
		</div>;
	}
}

Запустите этот код - и вы увидите на экране инпут со значением 'привет'. Но это значение можно будет сменить, при этом this.state.value не поменяется - двухсторонней связи нет.

Для чекбоксов существует аналогичный атрибут defaultChecked, с помощью которого можно задать начальное состояние (отмечен или нет):

class App extends React.Component {
	constructor() {
		super();
		this.state = {checked: true};
	}

	render() {
		return <div>
			<input
				type="checkbox"
				defaultChecked={this.state.checked}
			/>
		</div>;
	}
}

Запустите этот код - и вы увидите на экране отмеченный чекбокс. Если понажимать на этот чекбокс, то его состояние будет меняться, а this.state.checked при этом меняться не будет - двухсторонней связи нет.