React中无法通过select的onChange事件获取option的key属性值如何解决

问题根本原因 #

React的key是框架内部用于列表Diff优化的特殊保留属性，不会挂载到真实DOM节点上，也无法通过事件对象的target属性直接读取。

解决方案 #

方法1：把key值绑定到option的value属性上（最推荐） #

select的onChange事件默认可直接读取选中项的value值，直接将需要的key存入value属性即可：

import { arry } from "./constant";

export default function App() {
  const onChangeHandler = (e) => {
    // 此处拿到的value即为目标key值
    console.log(e.target.value);
  };

  return (
    <div className="App">
      <select onChange={onChangeHandler}>
        {arry.map((obj) => {
          return <option key={obj.key} value={obj.key}>{obj.sub}</option>;
        })}
      </select>
    </div>
  );
}

如果业务需要同时获取sub和key两个字段，可自行拼接value格式后续拆分，或使用其他方案。

方法2：通过选中项索引匹配原数组 #

拿到选中项的索引后，直接从原数组中读取对应条目拿到key：

import { arry } from "./constant";

export default function App() {
  const onChangeHandler = (e) => {
    const selectedIndex = e.target.selectedIndex;
    const selectedKey = arry[selectedIndex].key;
    console.log(selectedKey);
  };

  return (
    <div className="App">
      <select onChange={onChangeHandler}>
        {arry.map((obj) => {
          return <option key={obj.key}>{obj.sub}</option>;
        })}
      </select>
    </div>
  );
}

方法3：自定义data属性存储key #

通过HTML标准的data-*自定义属性存储key值，再通过DOM的dataset属性读取：

import { arry } from "./constant";

export default function App() {
  const onChangeHandler = (e) => {
    const selectedOption = e.target.options[e.target.selectedIndex];
    const selectedKey = selectedOption.dataset.key;
    console.log(selectedKey);
  };

  return (
    <div className="App">
      <select onChange={onChangeHandler}>
        {arry.map((obj) => {
          return <option key={obj.key} data-key={obj.key}>{obj.sub}</option>;
        })}
      </select>
    </div>
  );
}

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