score:2

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) {
    super(props);
    this.state = { currentValue: this.props.defaultValue };
  }

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

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

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

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

Check this example fiddle: https://jsfiddle.net/y64gbhf8/1/

score:0

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