我有这个select
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
的数据集} tag而不是选中的选项标签:
onChange: function(e) {
this.props.onChange(this.props.name, e.target.value, e.target.dataset.continent, e.target.dataset.country);
},
这是否有解决方法?
由于
答案 0 :(得分:12)
我发现@bjfletcher比我的更优雅,但我会报告记录:
我通过<option>
方法中的e.target.options[e.target.selectedIndex]
访问onChange
DOM元素:
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);
},
不确定兼容性。
答案 1 :(得分:4)
我会绕过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,您可以使用.find
或您使用的任何JS替换forEach
。)
答案 2 :(得分:1)
我认为您最好的选择是使用refs
。
var options = this.props.options.map((option) => {
return (<option ref={'option_ref_' + option.slug} ...></option>);
});
onChange: function(e) {
var selectedOption = this.refs['option_ref_' + e.target.value];
selectedOption['data-country']; //should work
...
},