如何使用react.js处理单选按钮

Question

I'm building a React Component. This is a form, with a radio button, which can only be set to True and then no longer set back to false. I would like to be able to turn it on and off. And because worth read out.
What could the corresponding code look like? At the moment I have that:

import React, { Component } from 'react';

class Form extends Component {
art = {
selected: "uppper"
}
 onChange() {
console.log("Click")
 }
render() {
 return (
  <form onSubmit={this.handleFormSubmit}>
    <div>
      <label>
        <input type="radio" value="option1"
        onClick={this.onChange} />
        option1
      </label>
    </div>  
    <input type="submit" value="Submit" />
   </form>
   );
  }
 } 
export default Form;

Answer 1

while being consistent with using a class-component, your code would look something like this:

class Form extends Component {
  state = {
    selected: false
  };
  onChange = () => {
    this.setState({
      selected: !this.state.selected
    });
  };
  render() {
    return (
      <form onSubmit={this.handleFormSubmit}>
        <div>
          <label>
            <input
              type="radio"
              value="option1"
              onClick={this.onChange}
              checked={this.state.selected}
            />
            option1
          </label>
        </div>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}
export default Form;

Essentially what you need are 3 things.

1. A Boolean value in your state to keep track of the button was clicked (true or false).
2. Give the input a checked property which matches the value of the selected state.
3. Update the onChange handler to toggle the state value. Also ensure that the onChange handler is bound to the execution context by using an arrow function or binding the this keyword.

See working sandbox: https://codesandbox.io/s/mystifying-borg-gwl2q

Answer 2

Here's how you can do this:

import React, { useState } from 'react';
import { render } from 'react-dom';

const App = () => { 
  const [radioState, setRadioState] = useState(false);

  const handleChange = () => { 
    setRadioState(!radioState)
  }

  return (
    <input type="radio" checked={radioState} onClick={handleChange}/>
  )
}

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

Live example here .