React中如何存储、访问select option的data属性？当前获取返回null

嘿，我来帮你搞定这个困扰！你遇到的问题核心很明确：当你在<select>元素上监听onChange事件时，event.target指向的是整个<select>标签，而不是当前选中的<option>元素，所以直接用它去获取data-industry自然会返回null。

下面给你几种可行的解决方案，按需选择：

方案一：通过选中索引获取对应的Option元素 #

这是最直接的修复方式，先拿到<select>的选中索引，再找到对应的<option>，就能获取它的data属性了：

<select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}>
  <option value="" data-industry="industry1">Select Industry</option>
  <option value="" data-industry="industry2">Select Industry 2</option>
</select>

onIndustryChangeOption(event) {
  // 获取当前的select元素
  const selectEl = event.target;
  // 通过选中索引找到对应的option
  const selectedOption = selectEl.options[selectEl.selectedIndex];
  // 获取data-industry属性值
  const industry = selectedOption.getAttribute('data-industry');
  // 或者用更简洁的HTML5 dataset API
  // const industry = selectedOption.dataset.industry;
  
  console.log(industry); // 现在能正确输出industry1/industry2了
  this.props.setRootState({selectedIndustry: selectEl.value});
}

方案二：将Data属性与Option Value绑定（更推荐） #

如果你的data-industry值和value不需要区分，那直接把value设成data-industry的值会更简单，这样不用额外获取data属性：

<select onChange={(e) => this.onIndustryChangeOption(e)} value={this.props.selectedIndustry}>
  <option value="industry1">Select Industry</option>
  <option value="industry2">Select Industry 2</option>
</select>

onIndustryChangeOption(event) {
  const industry = event.target.value;
  console.log(industry); // 直接拿到industry1/industry2
  this.props.setRootState({selectedIndustry: industry});
}

这种方式代码更简洁，也符合HTML表单的常规用法，除非你需要value和data-industry存储不同的信息，否则优先选这个方案。

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