Как сделать контролируемый элемент select в функциональном компоненте React?

Как можно сделать блок "select" контролируемым в функциональном компоненте React?
  • 15 октября 2023 г. 14:07
Ответы на вопрос 1
Для того чтобы сделать элемент select контролируемым в функциональном компоненте React, следует использовать хук useState для хранения выбранного значения и привязать его к элементу select через свойство value.

Пример:

```jsx
import React, { useState } from 'react';

const MyComponent = () => {
  const [selectedOption, setSelectedOption] = useState('');

  const handleSelectChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <select value={selectedOption} onChange={handleSelectChange}>
      <option value="option1">Option 1</option>
      <option value="option2">Option 2</option>
      <option value="option3">Option 3</option>
    </select>
  );
};

export default MyComponent;
```

В этом примере значение выбранной опции хранится в состоянии selectedOption, и при изменении выбора вызывается функция handleSelectChange, которая обновляет значение состояния. Затем, свойство value элемента select привязывается к этому состоянию.
Похожие вопросы