Работа с селектами в React

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

Пусть у нас есть вот такой селект:

function App() {
	return <div>
		<select>
			<option>text1</option>
			<option>text2</option>
			<option>text3</option>
			<option>text4</option>
		</select>
	</div>;
}

Давайте обеспечим его работу средствами React:

function App() {
	const [value, setValue] = useState('');
	
	function handleChange(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<select value={value} onChange={handleChange}>
			<option>text1</option>
			<option>text2</option>
			<option>text3</option>
			<option>text4</option>
		</select>
		<p>
			ваш выбор: {value}
		</p>
	</div>;
}

Сделайте выпадающий список городов. Сделайте также абзац, в который будет выводиться выбор пользователя.

Пункты списка из массива

Пусть у нас есть массив с текстами пунктов выпадающего списка:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	return <div>
		...
	</div>;
}

Давайте сформируем наши теги option в цикле:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	const options = texts.map((text, index) => {
		return <option key={index}>{text}</option>;
	});
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			{options}
		</select>
		<p>
			ваш выбор: {value}
		</p>
	</div>;
}

Пусть в массиве хранится список городов. Выведите с помощью цикла выпадающий список этих городов.

Атрибуты value в тегах option

Пусть теперь у нас в тегах option есть атрибуты value:

function App() {
	return <div>
		<select>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
	</div>;
}

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

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={(event) => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			ваш выбор: {value}
		</p>
	</div>;
}

Разделить текст option и его значение может быть удобно: текст тега мы можем менять как нам угодно, при этом в нашем скрипте результат выбора будет обрабатываться по значению атрибута value, которые останется неизменным.

Смотрите пример:

function App() {
	const [value, setValue] = useState('');
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			<option value="1">text1</option>
			<option value="2">text2</option>
			<option value="3">text3</option>
		</select>
		<p>
			{value === '1' && 'вы выбрали первый пункт'}
			{value === '2' && 'вы выбрали второй пункт'}
			{value === '3' && 'вы выбрали третий пункт'}
		</p>
	</div>;
}

Теперь, если мы изменим тексты оптионов, то работа скрипта не нарушится - ведь она привязана к значению атрибута value.

С помощью выпадающего списка предложите пользователю выбрать к какой возрастной группе он относится: от 0 до 12 лет, от 13 до 17, от 18 до 25, либо старше 25 лет.

Пункты из массива + атрибуты value

Пусть у нас опять пункты списка хранятся в массиве:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	...
}

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

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	const options = texts.map((text, index) => {
		return <option key={index} value={index}>{text}</option>;
	});
	
	...
}

Используя сформированные теги создадим выпадающий список:

return <div>
	<select value={value} onChange={event => setValue(event.target.value)}>
		{options}
	</select>
</div>;

Выведем в абзац номер выбранного пункта:

return <div>
	<select value={value} onChange={event => setValue(event.target.value)}>
		{options}
	</select>
	<p>
		ваш выбор: {value}
	</p>
</div>;

А теперь выведем текст выбранного пункта, используя его номер и массив с текстами:

return <div>
	<select value={value} onChange={event => setValue(event.target.value)}>
		{options}
	</select>
	<p>
		ваш выбор: {texts[value]}
	</p>
</div>;

Соберем все вместе и получим следующий код:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	const options = texts.map((text, index) => {
		return <option key={index} value={index}>{text}</option>;
	});
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			{options}
		</select>
		<p>
			ваш выбор: {texts[value]}
		</p>
	</div>;
}