reactjs - react : access data-attribute in tag

Question

我有这个选择 JSX:

    <select className="form-control" onChange={this.onChange} value={this.props.value}>
      {options}
    </select>

选项为:

var options = this.props.options.map((option) => {
  return (<option key={option.slug} value={option.slug} data-country={option.country} data-continent={option.continent}>{option.value}</option>);
});

但我无法访问所选选项的所选data-country，因为该值是通过e.target.value访问的，并且e .target.dataset 是 select 标签的数据集，而不是选项 selected 标签:

  onChange: function(e) {
    this.props.onChange(this.props.name, e.target.value, e.target.dataset.continent, e.target.dataset.country);
  },

这个问题有解决办法吗？

谢谢

Answer 1

我发现@bjfletcher 比我的更优雅，但我会报告记录:

我访问<option> DOM 元素通过e.target.options[e.target.selectedIndex]在 onChange方法:

  onChange: function(e) {
    var dataset = e.target.options[e.target.selectedIndex].dataset;
    this.props.onChange(this.props.name, e.target.value, dataset.continent, dataset.country);
  },

但不确定兼容性。