Accepted answer

As @julien mentions, you can use ref instead of JQuery to get the current value of the select in an uncontrolled component:

class MySelect extends React.Component {
  constructor(props) {
    this.state = { currentValue: this.props.defaultValue };

  updateValue() {
    this.setState({ currentValue: this.refs.myselect.value });

  render () {
    return (
          <button className="current" onClick={this.updateValue.bind(this)}>{this.state.currentValue}</button>

        <select ref="myselect" defaultValue={this.props.defaultValue}>
          <option value="a">A</option>
          <option value="b">B</option>
          <option value="c">C</option>

For the other part, defaultValue should work just as you were trying.

Check this example fiddle:


you can try Uncontrolled Components

you don't need to write event handler for state update,DOM will handle it, then you can use a ref to get form values from the DOM

Related Query

More Query from same tag