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＆amp;＆amp; parser2＆amp;＆amp; parser3） this.setState（{parsed：true}）; }， render：function（）{ var parsing =＆＃34;解析工作＆＃34 ;; 回来（＆LT; DIV＆GT; ＆LT;选择的onChange = {this._parseEvent}＆GT; ＆lt; option value =＆＃34; ----＆＃34;＆gt; ----＆lt; / option＆gt; ＆lt; option value =＆＃34;是＆＃34;＆gt;是＆lt; / option＆gt; ＆lt; option value =＆＃34; No＆＃34;＆gt; No＆lt; / option＆gt; ＆LT; /选择＆GT; ＆LT; p为H. {this.state.parsed？ {}解析：空值} ＆LT; / p为H. ＆LT; / DIV＆GT; ）; } }）; React.render（＆lt; Hello name =＆＃34; World＆＃34; /＆gt ;, document.getElementById（＆＃39; container＆＃39;））; 我使用三种方法解析＆lt; select＆gt;的值。元件。第一个不适用于IE 10，我知道这是我的问题中的一个错误。但是，在其他两种方式中，parser2或parser3，这是获取＆lt; select＆gt;的值的正确方法。 React中的元素？为什么？谢谢你的帮助！

Answer 1

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

event.target.value

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

Answer 2

虽然另一个答案很好，但如果您正在寻找React方式，那么可以通过使用ref来实现。

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

这里有一个更新的小提示：https://jsfiddle.net/ve88383c/4/

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

2 个答案: