How to use react ref to get value from html select element?

Question

I have a form in which I am using html select element.

  <select className="form-control" id="ntype" required >
      <option value = "">None</option>
      <option value = "1">1</option>
      <option value = "2">2</option>
      <option value = "3">3</option>
  </select>

I know with html input type element we can attach ref like below code

ref = {(input) => { this.nHeading = input; }}

and

<input
    type        = "text"
    className   = "form-control"
    id          = "tInput"
    placeholder = "Sample input"
    ref         = {(input) => { this.sInput = input; }}
    required
/>

How can I attach ref to <Select> element and get selected option value from the attached ref when form is submitted?

Do I need to attach ref to each options or select element itself?

Answer 1

You can store the value in a state on change and later use that i.e make it a controlled component

class App extends React.Component {
constructor() {
super();
    this.state = {selectValue: ''}
    }
    callThis = (e) => {
        this.setState({selectValue: e.target.value}, ()=> {console.log(this.state.selectValue)});
        
    }
    render() {
    
      return (
          <select onChange={this.callThis}className="form-control" id="ntype" required >
              <option value = "">None</option>
              <option value = "1">1</option>
              <option value = "2">2</option>
              <option value = "3">3</option>
          </select>
         
      )
    }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

Or you can use refs to get the value like this

class App extends React.Component {
constructor() {
super();
    this.state = {selectValue: ''}
    }
    callThis = (e) => {
        console.log(this.selectVal.value)
        
    }
    render() {
    
      return (
          <div><select ref={(input) => this.selectVal = input} className="form-control" id="ntype" required >
              <option value = "">None</option>
              <option value = "1">1</option>
              <option value = "2">2</option>
              <option value = "3">3</option>
          </select>
          <input type="button" value="click" onClick={this.callThis}/></div>
      )
    }
}
ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>