/Javascript/React/Reactjs radio button onchange

Reactjs radio button onchange

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  handleChange = e => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    });
  };

  render() {
    return (
      <div className="radio-buttons">
        Windows
        <input
          id="windows"
          value="windows"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
        Mac
        <input
          id="mac"
          value="mac"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
        Linux
        <input
          id="linux"
          value="linux"
          name="platform"
          type="radio"
          onChange={this.handleChange}
        />
      </div>
    );
  }
}

Source: stackoverflow.com

How to use radio buttons in react class-based components

class App extends React.Component {
  
  setGender(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

Source: stackoverflow.com

Similar codes

2 votes362 views1 answer
What is virtual dom in react
Javascript React
0 vote390 views2 answers
Reactjs hello world
Javascript React
131 votes610 views6 answers
Creating react app
Javascript React
0 vote415 views1 answer
Get lat and long from address in react js
Javascript React
0 vote402 views1 answer
When reload the page the route gone in react js laravel
Javascript React
21 votes299 views3 answers
Hide header bar react navigation
Javascript React
23 votes372 views4 answers
Click to copy react
Javascript React
3 votes420 views1 answer
React native elements
Javascript React
0 vote365 views1 answer
Setstate before function react
Javascript React
0 vote442 views2 answers
How to spot Error: Maximum update depth exceeded. in react
Javascript React