/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

3 votes140 views4 answers
Add new array at the back of react state
Javascript React
0 vote180 views1 answer
React document viewer
Javascript React
3 votes144 views1 answer
React prop ytpes
Javascript React
0 vote145 views1 answer
How to remove elevation tab bar react native
Javascript React
-2 votes161 views1 answer
You are running Node 8.10.0. Create React App requires Node 10 or higher. Please update your version of Node.
Javascript React
17 votes137 views5 answers
Add background image react native
Javascript React
4 votes145 views1 answer
On window resize react
Javascript React
3 votes137 views1 answer
React get method
Javascript React
6 votes144 views2 answers
Export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'
Javascript React
3 votes141 views1 answer
React after deployment givin nginx 404
Javascript React