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

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

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/

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