React CheckBox问题

Question

源码
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>
    );
  }
}

在线演示(支持DevTool)
https://react-as5oze.stackbli...

问题是这样的:

1. 如果this.state.checked一开始是true(蓝色背景),那么我点一下勾选框(this.state.checked为false了),再点一下something按钮,它又变成了蓝色
2. 如果this.state.checked一开始是false(红色背景),那么我点一下勾选框(this.state.checked为false了),再点一下something按钮,它又变成了红色

something按钮的功能就是将checked设为undefined,请问这个按钮为什么会出现上述这种看起来像'复原'的功能

补充(我实际遇到的问题):
一个设置页,如果用户点击取消则将所有checkbox复原,经过排查发现再复原方法中漏了一个state字段(这就导致这个字段在复原时设为undefined),但是从界面上却是正常效果

Answer 1

这和 react 的实现用关系. react 会把 input 的初始状态存在 dom 元素的 _wrapperState 中. 你通过
document.getElementById('test')._wrapperState 看到, 其中 _wrapperState.initialChecked 存的是 input 初始的 checked 属性, 当 state.checked 变为 undefined 时, react 的 diff 算法会选择使用 _wrapperState.initialChecked 作为 input 的值.

Answer 2

打开控制台可以看到告警信息

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...

当把state里面的checked设置为undefined后，input组件的checked属性之前由state所控制转变成不受控制了，所以会出现上面的提示。
推荐修改方式如下：

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