React 绑定toggle方法的checkbox点击无响应 无法切换内容包裹

问题原因 #

你代码中的核心问题是toggleWrap方法内的setState使用方式不符合React规范：
当使用函数式更新语法调用setState时，不允许直接修改传入的prevState对象，你需要返回一个全新的状态对象，React才会判定状态发生变更，触发组件重渲染。你当前的写法属于直接修改原有状态（状态突变），React无法检测到状态变化，因此不会更新视图，看起来就像toggleWrap方法没有生效。
而你手动修改state初始值后逻辑正常，是因为修改发生在组件第一次初始化渲染之前，组件会直接用修改后的初始值完成首次渲染，没有涉及运行时的状态更新逻辑。

修复方案 #

将你的toggleWrap方法替换为以下写法即可：

toggleWrap = () => {
  this.setState(prevState => ({
    wrapContent: !prevState.wrapContent
  }))
}

如果你不习惯函数式更新的写法，也可以用对象式更新实现同样效果：

toggleWrap = () => {
  this.setState({
    wrapContent: !this.state.wrapContent
  })
}

内容的提问来源于stack exchange，提问作者SuspensionBlues