使用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