What is the proper way to get the value of a React element? Asked Jun 16 '15 at 15:56 Active Jun 16 '15 at 18:04 Viewed 898 times 2 Say I have the following React element (example fiddle here): var Hello = React.createClass({ getInitialState: function() { return {parsed: false}; }, _parseEvent: function(event) { var parser1 = event.currentTarget.selectedOptions[0].value; var parser2 = event.target.value; var parser3 = event.nativeEvent.srcElement.value; if (parser1 && parser2 && parser3) this.setState({parsed: true}); }, render: function() { var parsing = "parsing worked"; return ( <div> <select onChange={this._parseEvent}> <option value="----">----</option> <option value="Yes">Yes</option> <option value="No">No</option> </select> <p> { this.state.parsed ? {parsing} : null} </p> </div> ); } }); React.render(<Hello name="World" />, document.getElementById('container')); I'm using three ways of parsing the value of the <select> element. The first does not work on IE 10, and I know it's a bug per my question here. However, of the other two ways, parser2 or parser3, which is the proper way to get the value of a <select> element in React? Why? Thanks for any help! javascript internet-explorer reactjs html-select internet-explorer-10 edited May 23 '17 at 12:06 Community 1 1 asked Jun 16 '15 at 15:56 YPCrumble 26,610 23 107 172 2 Answers2 6 Use what you would use in a W3C compatible browser: event.target.value This is also agnostic to the type of the form control element. answered Jun 16 '15 at 16:01 Felix Kling 795,719 175 1,089 1,143 @Felix_Kling thanks! Could you expand what you mean by W3C compatible browser? I'm googling "W3C element" and "W3C compatible browser" but can't find the guidelines. Trying to figure out how to avoid making the same mistake in the future :). – YPCrumble Jun 16 '15 at 16:03

Answer 1

While the other answer works just fine, if you're looking for a React way, then this can be accomplished by using refs.

Assign a ref to the select:

<select onChange={this._parseEvent} ref="select">
    <option value="----">----</option>
    <option value="Yes">Yes</option>
    <option value="No">No</option>
/select>

Get the DOM node via ref:

var node = React.findDOMNode(this.refs.select)

Get the value via DOM node:

var value = node.value;

Here's an updated fiddle to demonstrate: https://jsfiddle.net/ve88383c/4/