In this example, i will show you react radio button onchange event example. if you want to see example of react radio buttons example then you are a right place. we will help you to give example of react radio button group example. it's simple example of how to implement radio button in react.
If you are new in react js then you want to see how to use radio button in react app. but it's very easy to use radio button input in react js app. you can use it as you use in html and you have to write change event on it. using that change event you have to store value into form state. so you can get that data on submit.
In this example, we will take simple "gender" with male and female radio button and add onchange event with handleChange() then we will assign value on state variable array. Then on submit event we will take that values with state variable.
So, let's see bellow preview and code:
Example Code:
import React, { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor() {
super();
this.state = {
gender: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({gender: event.target.value});
}
handleSubmit(event) {
console.log(this.state);
event.preventDefault();
}
render() {
return (
<div>
<h1>React Radio Buttons onChange Example - HDTuto.com</h1>
<form onSubmit={this.handleSubmit}>
<strong>Select Gender:</strong>
<label>
<input
type="radio"
value="male"
onChange={this.handleChange}
/>Male
</label>
<label>
<input
type="radio"
value="female"
onChange={this.handleChange}
/>Female
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
Output:
{gender: "male"}
I hope it can help you...
Do you like below Tutorials ?
- Angular Json Pipe Example | Json Pipe in Angular 9/8/7
- Angular Slice Pipe Example | Slice Pipe in Angular 9/8/7
- Angular Uppercase Pipe Example | Uppercase Pipe in Angular 9/8/7
- Angular LowerCase Pipe Example | LowerCase Pipe in Angular 9/8/7
- Angular Titlecase Pipe Example | Titlecase Pipe in Angular 9/8/7
- Angular KeyValue Pipe Example | KeyValue Pipe in Angular 9/8/7
- Call Method from One Component to Another Component in Angular
- Angular Push Object into Array Example