<select>
Вбудований компонент браузера <select> компонента дозволяє відображати поле вибору з опціями.
<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>Довдіник
<select>
Щоб відобразити поле вибору, відрендеріть вбудований компонент браузера <select>.
<select>
<option value="someOption">Some option</option>
<option value="otherOption">Other option</option>
</select>Дивіться більше прикладів нижче.
Пропси
<select> підтримує всі пропси спільних елементів.
Ви можете зробити поле вибору керованим, передавши значення prop:
значення: Рядок (або масив рядків дляmultiple={true}). Визначає, яку опцію буде обрано. Кожен рядок значення відповідаєvalueдеякого<option>, вкладеного у<select>.
При передачі значення ви також повинні передати обробник onChange, який оновлює передане значення.
Якщо ваш <select> є неконтрольованим, ви можете передати замість нього проп defaultValue:
defaultValue: Рядок (або масив рядків дляmultiple={true}). Вказує початково вибрану опцію.
Ці <select> пропси стосуються як неконтрольованих, так і контрольованих полів вибору:
autoComplete: Рядок. Вказує одну з можливих поведінок автозаповнення.autoFocus: Булеве значення. Якщоtrue, React сфокусує елемент на mount. .
children:<select>приймає компоненти<option>,<optgroup>та<datalist>як дочірні. Ви також можете передавати власні компоненти, якщо вони зрештою рендеритимуть один із дозволених компонентів. Якщо ви передаєте власні компоненти, які зрештою рендеритимуть теги<option>, кожен<option>, який ви рендерите, повинен матизначення.disabled: Булевий вираз. Якщоtrue, поле вибору не буде інтерактивним і виглядатиме затемненим.form: Рядок. Вказує ідентифікаторidдля<form>, до якого належить це поле вибору. Якщо не вказано, це найближча батьківська форма.multiple: Логічний вираз. Якщоtrue, браузер дозволяє множинний вибір.name: Рядок. Вказує ім'я для цього поля вибору, яке надсилається разом з формою.onChange: Функція-обробникEvent. Потрібна для контрольованих полів вибору. Спрацьовує негайно, коли користувач вибирає іншу опцію. Поводиться подібно до подіїinputбраузера.onChangeCapture: ВерсіяonChange, яка спрацьовує у фазі захоплення.onInput: Функція-обробникEvent. Спрацьовує негайно, коли користувач змінює значення. З історичних причин у React ідіоматичним є використанняonChange, який працює аналогічно.onInputCapture: ВерсіяonInput, яка спрацьовує у фазі захоплення.onInvalid: Функція-обробникEvent. Спрацьовує, якщо вхідні дані не пройшли валідацію при надсиланні форми. На відміну від вбудованої подіїinvalid, подія ReactonInvalidbubbles.onInvalidCapture: ВерсіяonInvalid, яка спрацьовує у фазі захоплення.required: Логічний вираз. Якщоtrue, значення має бути надано для форми для відправки.size: Число. Дляmultiple={true}вибирає, вказує бажану кількість початково видимих елементів.
Застереження
- На відміну від HTML, передача атрибута
selectedдо<option>не підтримується. Замість цього використовуйте<select defaultValue>для некерованих полів вибору і<select value>для керованих полів вибору. - Якщо поле вибору отримує проп
значення, його буде розглянуто як керований. - Поле вибору не може бути одночасно контрольованим і неконтрольованим.
- Поле вибору не може перемикатися між контрольованим та неконтрольованим станом протягом свого життя.
- Кожне кероване поле вибору потребує обробник подій
onChange, який синхронно оновлює його опорне значення.
Використання
Відображення поля вибору з опціями
Зобразіть <select> зі списком <option> компонентів всередині для відображення вікна вибору. Надати кожному <option> значення , що представляє дані, які буде надіслано з формою.
export default function FruitPicker() {
return (
<label>
Pick a fruit:
<select name="selectedFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
);
}select { margin: 5px; }Надання мітки для поля вибору
Зазвичай, ви розміщуєте кожну <select> всередині тегу <label>. Це повідомляє браузеру, що ця мітка пов'язана з цим полем вибору. Коли користувач натискає на мітку, браузер автоматично фокусує поле вибору. Це також важливо для доступності: програма для зчитування з екрана озвучить підпис мітки, коли користувач сфокусує поле вибору.
Якщо ви не можете вкласти <select> у <label>, об'єднайте їх, передавши однаковий ідентифікатор <select id> та <label htmlFor>. Щоб уникнути конфліктів між екземплярами одного компонента, згенеруйте такий ідентифікатор за допомогою useId.
import { useId } from 'react';
export default function Form() {
const vegetableSelectId = useId();
return (
<>
<label>
Pick a fruit:
<select name="selectedFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
<hr />
<label htmlFor={vegetableSelectId}>
Pick a vegetable:
</label>
<select id={vegetableSelectId} name="selectedVegetable">
<option value="cucumber">Cucumber</option>
<option value="corn">Corn</option>
<option value="tomato">Tomato</option>
</select>
</>
);
}select { margin: 5px; }Надання початково вибраної опції
За замовчуванням браузер вибере перший <option> у списку. Щоб вибрати інший варіант за замовчуванням, передайте значення цього <option> як defaultValue елементу <select>.
export default function FruitPicker() {
return (
<label>
Pick a fruit:
<select name="selectedFruit" defaultValue="orange">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
);
}select { margin: 5px; }На відміну від HTML, передача атрибута selected окремому <option> не підтримується.
Увімкнення множинного вибору
Передайте multiple={true} до <select>, щоб дозволити користувачеві вибрати декілька варіантів. У такому випадку, якщо ви також вкажете defaultValue для вибору початково вибраних опцій, це має бути масив.
export default function FruitPicker() {
return (
<label>
Pick some fruits:
<select
name="selectedFruit"
defaultValue={['orange', 'banana']}
multiple={true}
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
);
}select { display: block; margin-top: 10px; width: 200px; }Зчитування значення поля вибору під час надсилання форми
Додайте <form> навколо поля вибору з <button type="submit"> всередині. Він викличе ваш обробник події <form onSubmit>. За замовчуванням браузер надішле дані форми на поточну URL-адресу і оновить сторінку. Ви можете змінити цю поведінку, викликавши e.preventDefault(). Прочитайте дані форми за допомогою new FormData(e.target).
export default function EditPost() {
function handleSubmit(e) {
// Prevent the browser from reloading the page
e.preventDefault();
// Read the form data
const form = e.target;
const formData = new FormData(form);
// You can pass formData as a fetch body directly:
fetch('/some-api', { method: form.method, body: formData });
// You can generate a URL out of it, as the browser does by default:
console.log(new URLSearchParams(formData).toString());
// You can work with it as a plain object.
const formJson = Object.fromEntries(formData.entries());
console.log(formJson); // (!) This doesn't include multiple select values
// Or you can get an array of name-value pairs.
console.log([...formData.entries()]);
}
return (
<form method="post" onSubmit={handleSubmit}>
<label>
Pick your favorite fruit:
<select name="selectedFruit" defaultValue="orange">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
<label>
Pick all your favorite vegetables:
<select
name="selectedVegetables"
multiple={true}
defaultValue={['corn', 'tomato']}
>
<option value="cucumber">Cucumber</option>
<option value="corn">Corn</option>
<option value="tomato">Tomato</option>
</select>
</label>
<hr />
<button type="reset">Reset</button>
<button type="submit">Submit</button>
</form>
);
}label, select { display: block; }
label { margin-bottom: 20px; }Дайте ім'я вашому <select>, наприклад <select name="selectedFruit" />. Вказане вами name буде використано як ключ у даних форми, наприклад { selectedFruit: "orange" }.
Якщо ви використовуєте <select multiple={true}>, то FormData, який ви отримаєте з форми, міститиме кожне вибране значення як окрему пару ім'я-значення. Уважно подивіться на консольні журнали у наведеному вище прикладі.
За замовчуванням, будь-який <button> всередині <form> надішле його. Це може бути несподівано! Якщо у вас є власний кастомний Button React-компонент, розгляньте можливість повернення <button type="button"> замість <button>. Тоді, для більшої ясності, використовуйте <button type="submit"> для кнопок, які мають надсилати форму.
Керування полем вибору зі змінною стану
Поле вибору на зразок <select /> є неконтрольованим. Навіть якщо ви передасте початково вибране значення як <select defaultValue="orange" />, ваш JSX вказує лише початкове значення, а не те, що є зараз.
Щоб відрендерити контрольоване поле вибору, передайте йому проп value. React змусить поле вибору завжди мати передане вами значення value. Зазвичай, ви керуєте перемикачем, оголошуючи змінну стану :
function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('orange'); // Declare a state variable...
// ...
return (
<select
value={selectedFruit} // ...force the select's value to match the state variable...
onChange={e => setSelectedFruit(e.target.value)} // ... and update the state variable on any change!
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
);
}Це корисно, якщо ви хочете повторно відрендерити якусь частину інтерфейсу у відповідь на кожен вибір.
import { useState } from 'react';
export default function FruitPicker() {
const [selectedFruit, setSelectedFruit] = useState('orange');
const [selectedVegs, setSelectedVegs] = useState(['corn', 'tomato']);
return (
<>
<label>
Pick a fruit:
<select
value={selectedFruit}
onChange={e => setSelectedFruit(e.target.value)}
>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="orange">Orange</option>
</select>
</label>
<hr />
<label>
Pick all your favorite vegetables:
<select
multiple={true}
value={selectedVegs}
onChange={e => {
const options = [...e.target.selectedOptions];
const values = options.map(option => option.value);
setSelectedVegs(values);
}}
>
<option value="cucumber">Cucumber</option>
<option value="corn">Corn</option>
<option value="tomato">Tomato</option>
</select>
</label>
<hr />
<p>Your favorite fruit: {selectedFruit}</p>
<p>Your favorite vegetables: {selectedVegs.join(', ')}</p>
</>
);
}select { margin-bottom: 10px; display: block; }Якщо ви передасте значення без onChange, вибрати варіант буде неможливо. Коли ви керуєте полем вибору, передаючи йому деяке значення, ви примушуєте його завжди мати значення, яке ви передали. Отже, якщо ви передасте змінну стану як значення, але забудете синхронно оновити цю змінну стану під час обробника події onChange, React повертатиме поле вибору після кожного натискання клавіші до значення, яке ви вказали.
На відміну від HTML, передача атрибута selected окремому <option> не підтримується.