如何在react-bootstrap中获取select元素的值？

Question

所以我试图select在reactjs中获取元素的值,但是无法理解它.将this.refs.selectElement.getDOMNode().value始终作为到来undefined.表单上的所有其他控件text都正常工作.有任何想法吗？难道你无法获得select元素的值,refs必须使用onChange事件吗？

更新:

var TestSelectClass = React.createClass({
  mixins: [Router.Navigation],

  _handleDube: function(event) {
    DubeActionCreators.DubeTest({
      message: this.refs.message.getDOMNode().value,
      tax: this.refs.tax.getDOMNode().value,
      validity: this.refs.valid_for.getDOMNode().value
    });
  },

  render: function() {
    return (
      <ReactBootstrap.ListGroup>
          <textarea
            className="form-control"
            rows="3"
            placeholder="Enter message"
            ref="message" >
          </textarea>
          <div className="input-group">
            <span className="input-group-addon" id="basic-addon1">$</span>
            <input type="text" className="form-control" placeholder="10" aria-describedby="basic-addon1" ref="tax" />
          </div>
        <Input type="select" value="1" ref="valid_for">
          <option value="1">1 hour</option>
          <option value="2">1 day</option>
          <option value="2">5 days</option>
        </Input>
      </ReactBootstrap.ListGroup>
    )
  }
});

更新:解决方案 因此,如果有人遇到类似的东西,显然如果你正在使用react-bootstrap,Input如果你将它包装在一个中,你就无法访问该元素ListGroup.从中取出或将所有Input元素包装在<form>标签中.这解决了我的问题,感谢所有的帮助.

Answer 1

这很简单:

在渲染方法上你应该留意 bind(this)

<select onChange={this.yourChangeHandler.bind(this)}>
  <option value="-1" disabled>--</option>
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="3">three</option>
</select>

你的处理程序是这样的:

yourChangeHandler(event){
  alert(event.target.value)
}

Answer 2

我看到你正在使用react-bootstrap,它包含一个常规输入元素的包装器.

在这种情况下,您需要使用getInputDOMNode()包装函数来获取底层输入的实际DOM元素.但您也可以使用react-bootstrap为Input元素提供的getValue()便捷功能.

所以你的_handleDube功能应该是这样的:

  _handleDube: function(event) {
    DubeActionCreators.DubeTest({
      message: this.refs.message.getInputDOMNode().value,
      tax: this.refs.tax.getInputDOMNode().value,
      validity: this.refs.valid_for.getValue()
    });
  },

请参阅此JSFiddle以获取完整示例:http://jsfiddle.net/mnhm5j3g/1/

Answer 3

创建一个函数handleChange().然后,将它放在你的render()中,如下所示:

<Input type="select" value="1" ref="valid_for" onChange={this.handleChange}>

而组件中的功能:

handleChange: function(e) {
  var val = e.target.value;
},

Answer 4

"react": "^15.0.2",
"react-bootstrap": "^0.29.3",
"react-dom": "^15.0.2",

在env下,ReactDOM.findDOMNode()适合我.

在render()中:

<FormControl name="username" ref="username"/>

在handler()中:

const username = findDOMNode(this.refs.username);