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:

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