获取 React <select> 元素值的正确方法是什么？

Question

假设我有以下 React 元素 (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'));

我使用三种方法来解析 <select> 元素的值。第一个在 IE 10 上不起作用，我知道这是的一个错误。然而，在其他两种方式中，parser2 或 parser3，哪种方式才是在 React 中获取 <select> 元素值的正确方式？为什么？感谢您的帮助！

Answer 1

使用您将在 W3C 兼容浏览器中使用的内容：

event.target.value

这也与表单控件元素的类型无关。

Answer 2

虽然其他答案工作得很好，但如果您正在寻找 React 方式，那么这可以通过使用 refs 来完成。

为 select 分配一个 ref:

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

这里有一个更新的 fiddle 来演示：https://jsfiddle.net/ve88383c/4/

获取 React <select> 元素值的正确方法是什么？

What is the proper way to get the value of a React <select> element?

javascript

internet-explorer

html-select

internet-explorer-10

reactjs