什么是獲得React價值的正確方法 <select>元件？

Question

假設我有以下React元素（ 此處是示例小提琴 ）：

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'));

我正在使用三種方法來解析<select>元素的值。 第一個在IE 10上不起作用，我知道這是每個問題的錯誤。 但是，在其他兩種方法中， parser2或parser3 ，這是在React中獲取<select>元素值的正確方法嗎？ 為什么？ 謝謝你的幫助！

Answer 1

使用在W3C兼容瀏覽器中將使用的內容：

event.target.value

這也與表單控制元素的類型無關。

Answer 2

雖然其他答案很好用，但是如果您正在尋找一種React方法，那么可以通過使用refs來完成。

給選擇分配一個參考：

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

通過ref獲取DOM節點：

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

通過DOM節點獲取值：

var value = node.value;

這是演示的更新小提琴： https : //jsfiddle.net/ve88383c/4/