javascript - значение - Получить выбранный текст опции, используя реагировать JS?



selected js (4)

Вот что я делаю, чтобы получить текст из опции выбора в реагировать JS.

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

https://ffff65535.com

У меня есть компонент списка выбора, отображающий мой список выбора:

<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

Вы можете получить текст опции, заменив это:

event.nativeEvent.target.text;

с этим:

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

Нечто подобное должно делать

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

Вот демоверсия http://jsbin.com/vumune/4/


Текст опции - это просто свойство label соответствующего item .

В вашем случае, чтобы получить текст выбранной опции, вы можете сделать:

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

Array.prototype.find является частью предложения ES6. Подчеркивание или lodash уже упаковывают это как метод _.find .





reactjs