使用react js獲取選定的選項文本？

Question

我有我的選擇列表中的組件渲染我的選擇列表：

<form className="pure-form"> 
<select ref="selectMark" className="mark-selector" 
onChange={this.onChange}>{this.getOptions()} 
</select> 
</form> 

我有組件上的方法來創建選項：

getOptions: function() { 
    return this.props.renderProps.data.map(function (item) { 
     return <option key={item.value} value={item.value}>{item.label}</option>; 
    }.bind(this)); 

}, 

我的onChange方法工作正常的值：

onChange: function(event) { 
    var newValue = event.nativeEvent.target.value; 
    this.props.renderProps.onSaveCare(newValue); 
    this.setState({value: newValue}); 
    this.toggleEdit(); 
}, 

有沒有辦法讓我選擇文字？這給了我不確定

event.nativeEvent.target.text; //undefined 

Answer 1

像這樣的東西應該做

var index = event.nativeEvent.target.selectedIndex; 
event.nativeEvent.target[index].text 

這裏是一個演示http://jsbin.com/vumune/4/

Answer 2

選項的文本都只是相應item的label財產。

在你的情況下，以檢索所選選項的文本，你可以這樣做：

var selectedItem = this.props.renderProps.data.find(function (item) { 
    return item.value === event.target.value; 
}); 
selectedItem.label; 

Array.prototype.find是ES6建議的一部分。下劃線或lodash已將其包裝爲_.find method。

Answer 3

如果是單一的選擇，這裏有更簡單的方法：本

event.nativeEvent.target.text; 

：

e.target.selectedOptions[0].text

Answer 4

您可以通過更換此得到選項文本

event.target.options[event.target.selectedIndex].text 

Answer 5

這對我有用

const {options, value} = e.target; 
console.log(options[value].innerHTML); 

編輯：我剛剛意識到我正在使用「值」字段來存儲一些對象的ID，從0到n。我想一個更好的辦法可能是以下幾點：

const {options, selectedIndex} = e.target; 
console.log(options[selectedIndex].innerHTML); 

Answer 6

這裏我做什麼來檢索在選擇選項的文本反應JS。

this.refs.selectMark[this.refs.selectMark.value].text