React CheckBox problem

Source code
https://stackblitz.com/edit/r.

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React",
      checked:false,
    };
    this.handleChange=this.handleChange.bind(this)
  }
  handleChange(event){
    this.setState({
      checked:event.target.checked
    })
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <input checked={this.state.checked} onChange={this.handleChange} id="test" type="checkbox" />
        
        <span>color for test</span>
        <div>
          <label for="test" >test"s label</label>
          <button onClick={()=>{
            this.setState({
              checked:undefined
            })
          }}>
            something
          </button>
        </div>
      </div>
    );
  }
}

online presentation (DevTool supported)
https://react-as5oze.stackbli.

the problem is this:

  1. if this.state.checked starts with true (blue background), then I click the check box (this.state.checked is false), and then click the something button, which turns blue
  2. .
  3. if this.state.checked starts with false (red background), then I click the check box (this.state.checked is false), and then click the something button, which turns red
  4. .
The function of the

something button is to set checked to undefined,. Why does this button appear such a function that looks like "restore" as mentioned above

add (the problem I actually encountered):
a settings page that restores all checkbox if the user clicks cancel. After troubleshooting, it is found that a state field is missing in the recovery method (which causes this field to be set to undefined), but works normally on the interface

).
Mar.24,2021

Open the console to see the alarm message

Warning: A component is changing a controlled input of type checkbox to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info:
https://fb.me/react-controlle.

when the checked in state is set to undefined, the checked property of the input component was previously controlled by state to be out of control, so the above prompt appears.
the recommended modification is as follows:

<button onClick={()=>{
            this.setState({
              checked:false
            })
          }}>

this is related to the implementation of react. React stores the initial state of input in the _ wrapperState of the dom element. You can see through
document.getElementById ('test'). _ wrapperState that _ wrapperState.initialChecked stores the initial checked attribute of input. When state.checked becomes undefined , react's diff algorithm chooses _ wrapperState.initialChecked as the input value.

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eb8279-26ae.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eb8279-26ae.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?