迹忆客 专注技术分享

在 React 中处理 select 元素上的 onChange 事件：

1. 在 select 元素上设置 onChange 属性。
2. 将所选选项的值保存在状态变量中。
3. 每次用户更改所选选项时，更新状态变量。

import {useState} from 'react';

const App = () => {
  const options = [
    {value: '', text: '--Choose an option--'},
    {value: 'apple', text: 'Apple 🍏'},
    {value: 'banana', text: 'Banana 🍌'},
    {value: 'kiwi', text: 'Kiwi 🥝'},
  ];

  const [selected, setSelected] = useState(options[0].value);

  const handleChange = event => {
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        {options.map(option => (
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

该示例将所有选项定义在一个数组中，以使我们的 JSX 代码更加简洁，但我们可以手动编写每个选项元素。

如果我们更愿意手动输入选项，请查看文章中的最后一个代码片段。

我们使用 useState 钩子来存储所选选项的值。

我们传递给钩子的参数是初始状态。 在示例中，我们将初始选择的值设置为空字符串，即第一个选项元素的值。

如果我们希望最初选择不同的选项，请将其值传递给 useState 钩子。

我们在 select 元素上设置了 onChange 属性，所以每次它的值改变时，都会调用 handleChange 函数。

const handleChange = event => {
  console.log(event.target.value);
  setSelected(event.target.value);
};

事件对象的 target 属性指的是 select 元素，所以我们可以访问选定的值作为 event.target.value。

在我们的 handleChange 函数中，我们只需使用所选选项的值更新状态。

如果我们需要获取与所选选项元素关联的文本，请访问所选选项的标签属性。

const handleChange = event => {
  console.log('Label 👉️', event.target.selectedOptions[0].label);

  console.log(event.target.value);
  setSelected(event.target.value);
};

下面是一个示例，说明如何在不使用 map() 的情况下手动输入 select 元素的选项。

import {useState} from 'react';

const App = () => {
  // 👇️ initial value of empty string (first option)
  const [selected, setSelected] = useState('');

  const handleChange = event => {
    console.log('Label 👉️', event.target.selectedOptions[0].label);
    console.log(event.target.value);
    setSelected(event.target.value);
  };

  return (
    <div>
      <select value={selected} onChange={handleChange}>
        <option value="">--Choose and option--</option>
        <option value="apple">Apple 🍏</option>
        <option value="banana">Banana 🍌</option>
        <option value="kiwi">Kiwi 🥝</option>
      </select>
    </div>
  );
};

export default App;

我们为 select 元素设置一个空字符串的初始值，这将呈现第一个选项。

我们可以通过提供不同的初始值来更改默认选择的选项，例如 apple。

确保初始值是 option 元素上 value 属性的可能值之一。