reactjs – React：访问标签中的data-attribute

发布时间：2020-12-15 20:18:17 所属栏目：百科来源：网络整理

导读：我有这个选择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-coun

我有这个选择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>);
});

但我无法访问所选选项的所选数据国家/地区,因为该值由e.target.value访问,而e.target.dataset是select标记的数据集,而不是选项选项标记：

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

有没有解决这个问题？

谢谢

解决方法

我会绕过slu ::

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

…然后使用slug检索数据：

onChange: function(event,index,value) {
  var option = this.props.options.find(option => option.slug === value);
  this.props.onChange(this.props.name,value,option.continent,option.country);
}

(如果不支持ES6,你可以用forEach或你使用的任何JS替换.find.)

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!