React CheckBox问题

Question

源码https://stackblitz.com/edit/r...
classAppextendsComponent{
constructor(){
super();
this.state={
name:'React',
checked:false,
};
this.handleChange=this.handleChange.bind(this)
}
handleChange(event){
this.setState({
checked:event.target.checked
})
}
render(){
return(
colorfortest
test'slabel
{
this.setState({
checked:undefined
})
}}>
something
);
}
}
在线演示(支持DevTool)https://react-as5oze.stackbli...
问题是这样的:
如果this.state.checked一开始是true(蓝色背景),那么我点一下勾选框(this.state.checked为false了),再点一下something按钮,它又变成了蓝色
如果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的值.