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(colorfortesttest'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的值.