React中如何获取选中选项的data-tag属性值

很简单，你已经能拿到选中项的value了，只需要再定位到对应的<option>元素，就能获取它的data-tag属性啦。这里有两种常用的方法：

方法一：通过selectedIndex和options集合获取 #

利用e.target.selectedIndex拿到选中项的索引，再从e.target.options集合中取出对应的option元素，然后用getAttribute()获取属性值：

handleSelectChange(e) {
  // 获取选中的option元素
  const selectedOption = e.target.options[e.target.selectedIndex];
  // 拿到选中的value值
  const inputValue = e.target.value;
  // 拿到data-tag属性值
  const tagValue = selectedOption.getAttribute('data-tag');
  
  // 测试输出
  console.log('选中值:', inputValue);
  console.log('data-tag值:', tagValue);
}

方法二：使用HTML5的dataset API（更简洁） #

HTML5提供了dataset属性，可以直接通过驼峰式命名访问data-*属性，比如data-tag对应dataset.tag：

handleSelectChange(e) {
  const selectedOption = e.target.options[e.target.selectedIndex];
  const inputValue = e.target.value;
  // 用dataset直接获取data-tag值
  const tagValue = selectedOption.dataset.tag;
  
  console.log('选中值:', inputValue);
  console.log('data-tag值:', tagValue);
}

小提示 #

• dataset是HTML5新增的API，现在主流浏览器都支持，写法更简洁；
• getAttribute('data-tag')兼容性更好，适合需要兼容老旧浏览器的场景；
• 这两种方法在React中都能直接用，因为e.target是原生DOM元素，不受框架影响。

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