Menu
I have my select list component rendering my select list:
<form className="pure-form"> <select ref="selectMark" className="mark-selector" onChange={this.onChange}>{this.getOptions()} </select> </form> I have a method on the component to create the options:
getOptions: function () { return this.props.renderProps.data.map(function (item) { return <option key={item.value} value={item.value}>{item.label}</option>; }.bind(this)); }, My onChange method works fine with the value:
onChange: function(event) { var newValue = event.nativeEvent.target.value; this.props.renderProps.onSaveCare(newValue); this.setState({value: newValue}); this.toggleEdit(); }, Is there a way I can get the option text? This gives me undefined
event.nativeEvent.target.text; //undefined 
211
Getting the Selected Value To fetch the selected value from the select element, you can use the onChange event handler prop. Just like the input or textarea elements, you can use the onChange event handler to get the value from the event object.
To handle the onChange event on a select element in React: Set the onChange prop on the select element. Keep the value of the selected option in a state variable. Every time the user changes the selected option, update the state variable.
You can add an onChange event handler to the select which checks for the selected index and retrieve the id from the selected option. This is a bit of an anti-pattern for React.
To set selected value of a select drop down to null with React, we can set the state we use as the value of the value prop of the select drop down to null . to set onChange to a function that calls setSelected to e. target. value which is the selected value if it's truthy.
Something like this should do
var index = event.nativeEvent.target.selectedIndex; event.nativeEvent.target[index].text Here is a demo http://jsbin.com/vumune/4/
178
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
