React中如何为原生HTML元素添加自定义属性？以及如何获取<option>标签的id属性？

兄弟，你遇到的这个问题其实是个常见小坑——onChange事件的触发目标是<select>元素本身，而不是你选中的<option>，所以e.target.id自然拿不到option上的id值。下面给你两种可行的解决方法，顺便说说原生HTML自定义属性的规范：

方法一：通过select的选中索引获取对应option #

利用<select>元素的options集合和selectedIndex属性，直接定位到选中的option元素，就能拿到它的id了：

const handleChange = (e) => {
  const selectEl = e.target;
  // 通过选中索引获取对应的option元素
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  // 现在可以正常拿到option的id
  console.log(selectedOption.id);
  // value也能正常获取
  console.log(selectedOption.value);
};

return (
  <div>
    <select onChange={handleChange}>
      <option value="1-10" id="foo">1-10</option>
      <option value="11-20" id="bar">11-20</option>
    </select>
  </div>
);

方法二：使用HTML5规范的自定义数据属性（推荐） #

在原生HTML中，自定义属性应该以data-作为前缀，这是W3C指定的规范，既保证语义化，又能通过元素的dataset对象轻松访问。我们可以把option的id改成data-id，这样使用起来更规范：

const handleChange = (e) => {
  const selectEl = e.target;
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  // 通过dataset访问自定义属性，注意属性名会自动转为驼峰（data-id → dataset.id）
  console.log(selectedOption.dataset.id);
};

return (
  <div>
    <select onChange={handleChange}>
      <option value="1-10" data-id="foo">1-10</option>
      <option value="11-20" data-id="bar">11-20</option>
    </select>
  </div>
);

关于原生HTML自定义属性的说明 #

如果你需要给HTML元素添加自定义属性，一定要遵循data-*的命名规则：

• 比如自定义属性user-id要写成data-user-id，访问时用element.dataset.userId
• 不要直接使用非data-前缀的自定义属性，虽然可以通过element.getAttribute('custom-prop')拿到，但不符合规范，可能存在兼容性或语义化问题。

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