Reactjs Library provides two options to handle form elements.
- Controlled Components - If you need to change something in UI according to the form value, use this option.
import { Component } from "react";
class App extends Component {
state = {
gender: "",
}; // Step 1 - Create a property related to `select` form element in state object
onChange = (e) => {
const val = e.target.value;
e.preventDefault();
this.setState(() => ({
gender: val,
})); // Step 5 - You can update the value by using `setState`
}; // Step 3 - Create a method for `select` form element onChange event
render() {
return (
<div className="col-3">
<select
name="gender"
id="id_gender"
value={this.state.gender} {/* Step 2 - Set that `select` related state property to value attribute */}
onChange={this.onChange} {/* Step 4 - Set that method to onChange event */}
>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
);
}
}
export default App;
- Uncontrolled Components - If you just need to form data to save in a database, then you can use this option.
import { Component, createRef } from "react";
class App extends Component {
constructor(props) {
super(props);
this.selectEle = createRef(); // Step 1 - Create the reference
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit = (e) => {
e.preventDefault();
alert(this.selectEle.current.value); // Step 3 - You can access to the value like this.
};
render() {
return (
<div className="col-3">
<select name="gender" id="id_gender" ref={this.selectEle}> {/* Step 2 - Add the reference to `select` element */}
<option value="m">Male</option>
<option value="f">Female</option>
</select>
<button type="submit" onClick={this.onSubmit}>
Submit
</button>
</div>
);
}
}
export default App;
