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

Handle the onChange event on a Select element in React

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

onChange在选择元素上设置道具。
将所选选项的值保存在状态变量中。
每次用户更改所选选项时，更新状态变量。

应用程序.js


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;

反应选择onchange

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

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

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

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

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

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

应用程序.js


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

target对象上的属性event指的是select元素，因此我们可以访问选定的值作为event.target.value.

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

如果您需要获取与所选option
元素关联的文本，请访问label所选选项的属性。

应用程序.js


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

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

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

应用程序.js


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。

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

–