How to get select element's value in react-bootstrap?

Question

So I'm trying to get a select element's value in reactjs, but just can't figure it out. The this.refs.selectElement.getDOMNode().value is always coming as undefined. All other controls on the form like text are working fine. Any ideas? Is it that you can't get the value of select element via refs and must use onChange event?

Updated:

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

Updated: Solution So, if anyone runs into something similar, apparently if you are using react-bootstrap you can't get to the Input element if you have wrapped it in a ListGroup. Either take it out from it or wrap all Input elements in a <form> tag. This solved my issue, thanks for all the help.

Answer 1

it's quite simple:

on the render method you should keep an eye on the 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>

and your handler is like:

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

Answer 2

I see you are using react-bootstrap, which includes a wrapper around regular input elements.

In this case you need to use the getInputDOMNode() wrapper function in order to get the underlying input's actual DOM element. But you can also use the getValue() convenience function that react-bootstrap provides for Input elements.

So your _handleDube function should look like:

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

See this JSFiddle for a complete example: http://jsfiddle.net/mnhm5j3g/1/

Answer 3

Make a function handleChange(). Then, put it in your render() like this:

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

And the function in the component:

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

Answer 4

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

under the env, ReactDOM.findDOMNode() works for me.

in render():

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

in handler():

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