React中如何获取select组件option的自定义属性而非仅value值

问题原因 #

• React的key是内部专用属性，不会渲染到真实DOM，无法直接读取
• onChange事件绑定在<select>元素上，event.target指向的是下拉框本身，不是选中的<option>节点，直接读取itemID自然返回undefined
• 自定义HTML属性无法直接通过DOM元素.属性名读取，需要用getAttribute方法，或使用标准data-*自定义属性通过dataset读取

解决方案（推荐） #

直接将<option>的value属性绑定为对应条目的key，选中后通过value获取key，再从原始数组匹配对应条目即可，修正后的代码如下：

import { useState } from 'react';
// 其他导入省略（Card、classes、Button等）

function Crafting(props) {
  const craftItems = [
    {
      key: 1,
      name: "Bronze sword",
    },
    {
      key: 2,
      name: "Iron sword",
    },
    {
      key: 3,
      name: "Steel sword",
    },
  ];

  const [item, setItem] = useState();
  const [itemKey, setItemKey] = useState();

  function onChangeHandler(event) {
    const selectedKey = Number(event.target.value);
    const selectedItem = craftItems.find(item => item.key === selectedKey);
    setItem(selectedItem.name);
    setItemKey(selectedKey);
  }

  function onSubmitHandler(event) {
    event.preventDefault();

    console.log(item);
    console.log(itemKey);
  }

  return (
    <Card className={classes.renderwin}>
      <form onSubmit={onSubmitHandler}>
        <label htmlFor="items">Select an item</label>

        <select name="items" onChange={onChangeHandler}>
          {craftItems.map((item) => (
            <option key={item.key} value={item.key}> {item.name} </option>
          ))}
        </select>
        <Button type="submit">Craft item</Button>
      </form>
    </Card>
  );
}

备选方案（读取自定义属性） #

如果不想修改value绑定，可以先拿到选中的option节点再读取自定义属性，把自定义属性改为标准data-*格式更符合规范：

// option部分修改为
<option key={item.key} data-item-id={item.key}> {item.name} </option>

// onChangeHandler修改为
function onChangeHandler(event) {
  const selectedOption = event.target.options[event.target.selectedIndex];
  const selectedKey = Number(selectedOption.dataset.itemId);
  const selectedItem = craftItems.find(item => item.key === selectedKey);
  setItem(selectedItem.name);
  setItemKey(selectedKey);
}

内容的提问来源于stack exchange，提问作者Cypher236