Get ausgewählten Optionstext mit react js?

Question

Ich habe meine Auswahlliste Komponente meine Auswahlliste Rendering:

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

Ich habe eine Methode auf der Komponente, um die Optionen zu erstellen:

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

}, 

Mein onChange Methode arbeitet mit dem Wert fein:

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

Gibt es eine Möglichkeit, den Optionstext zu bekommen? Das gibt mir undefined

event.nativeEvent.target.text; //undefined 

Answer 1

So etwas sollte hier eine Demo http://jsbin.com/vumune/4/

Answer 2

Der Text einer Option

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

tun, ist einfach die label Eigenschaft des entsprechenden item.

In Ihrem Fall, den Text der gewählten Option abzurufen, können Sie tun:

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

Array.prototype.find Teil des ES6 Vorschlag ist. Underscore oder lodash packen es bereits als _.find method.

Answer 3

Wenn es einzelne wählen, hier ist einfacher Art und Weise:

e.target.selectedOptions[0].text

Answer 4

Sie können die Option Text erhalten durch Ersetzen dieses:

event.nativeEvent.target.text; 

mit diesem:

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

Answer 5

Dies funktionierte für mich

Edit: Ich erkannte gerade, dass ich das Feld "Wert" verwendete, um die ID einiger Objekte von 0 bis n zu speichern. Ich denke, ein besserer Ansatz die folgende sein:

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

Answer 6

Hier ist, was ich tue in js reagieren, um den Text aus wählen Sie die Option abzurufen.

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