javascript - 我如何存储和访问元素的数据属性，例如 React 中的选择选项

Question

我想使用 react 从选项中获取数据属性，但由于某种原因我不能，我得到的是 null。

<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, index, value) {
   console.log(event.target.getAttribute('data-industry'));
   this.props.setRootState({selectedIndustry: event.target.value});
}

这行不通，我相信应该有其他方法可以做到这一点!

Answer 1

event.target 是select，不是option。您需要获取选项:

onIndustryChangeOption(event, index, value) {
  const {target} = event;
  const option = target.options[target.selectedIndex];
  if (option) {
    console.log(option.getAttribute('data-industry'));
    //this.props.setRootState({selectedIndustry: event.target.value});
  }
}

实例:

class Example extends React.Component {
  render() {
    return <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, index, value) {
    const {target} = event;
    const option = target.options[target.selectedIndex];
    if (option) {
      console.log(option.getAttribute('data-industry'));
      //this.props.setRootState({selectedIndustry: event.target.value});
    }
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

---

也就是说，对于给定的示例，不清楚为什么您不使用 value 代替。 :-)