陣營：在<option>標籤

Question

訪問數據屬性我有這樣的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標記的數據集，而不是選項標記：

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

有沒有解決這個問題？

感謝

Answer 1

我會繞過只是毛坯：

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

...然後用塞檢索數據：

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); 
} 

（你」 d用forEach或任何JS代替.find如果不能夠ES6 u使用）

Answer 2

我認爲最好的辦法是使用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 
    ... 
}, 

Answer 3

我覺得@bjfletcher甚至比我更優雅，但我會爲記錄報告：

我通過e.target.options[e.target.selectedIndex]訪問<option> DOM元素在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); 
    }, 

雖然不確定兼容性。