Menu
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?
716
To fetch the selected value from the select element, you can use the onChange event handler prop. Just like the input or textarea elements, you can use the onChange event handler to get the value from the event object. Now, make this select input element controlled by using the state to pass the value.
Get Select Element Value Using Ref To get the reference of the element, we use ref , and its value can be accessed throughout the existing components. The first step is to create ref in the React component. Now, the next step is to implement the react-bootstrap select element with the added ref property.
How do you display a selected value in a drop down list? STEP 1 − Create a select tag with multiple options and assign an id to the select tag. STEP 2 − Also, create an empty DOM with an id to display the output. STEP 3 − Let there be a button element for the user to click and see the option selected.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
