迹忆客 专注技术分享

在 React 中从数组中为 select 生成 option 标签：

1. 使用 map() 方法迭代数组。
2. 在每次迭代中，返回一个选项元素。
3. 将唯一的关键属性传递给每个选项元素。

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

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

  return (
    <div>
      <select onChange={handleChange} name="fruits" id="fruit-select">
        {arr.map((option, index) => (
          <option key={index} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

我们使用 Array.map 方法遍历数组并为每个数组元素呈现一个 option 标签。

我们传递给每个选项元素的关键属性由 React 在内部使用。 它跟踪数组中哪些元素发生了变化，因此 React 只能重新渲染发生变化的数组元素。

我们使用了 map() 方法中的索引，但是如果有的话最好使用一个稳定的值。

value 属性保证在所有 option 元素之间是唯一的，因此我们可以将它用于 key 属性。

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

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

  // 👇️ using option.value for key
  return (
    <div>
      <select onChange={handleChange} name="fruits" id="fruit-select">
        {arr.map(option => (
          <option key={option.value} value={option.value}>
            {option.text}
          </option>
        ))}
      </select>
    </div>
  );
};

export default App;

每次所选值更改时，都会调用 handleChange 函数。 我们可以访问事件对象上所选选项的值作为 event.target.value。