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:
- if
this.state.checkedstarts with true (blue background), then I click the check box (this.state.checked is false), and then click thesomethingbutton, which turns blue .
- if
this.state.checkedstarts with false (red background), then I click the check box (this.state.checked is false), and then click thesomethingbutton, which turns red .
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