使用 ReactJS 更改复选框时如何更改状态值

Question

我目前正在将 React 用于我工作的项目，并且我正在努力与我正在创建的表单绑定状态。所以我有这个：

getInitialState: function() {
    return {
        proofDivulgation: false,
        proofDivulgationFedex: false,
        proofDivulgationMail: false,
        noticeRecidivism: false,
        noticeRecidivismFedex: false,
        noticeRecidivismEmail: false,
        fedexAccount: '',
        emergyContact: false

    };

而且我想在修改复选框时更改这些布尔值（这些布尔值的值应该与复选框的选中值相同）。 我也有这个 React 组件

<Toggle defaultChecked={this.state.proofDivulgation} onChange={this.handleCheckboxChange(this.state.proofDivulgation)} />

这是附加到 onChange 事件的方法：

handleCheckboxChange: function(booleanToSwitch){
  console.log(booleanToSwitch);
  this.replaceState({booleanToSwitch : true})
},

这给了我这个错误：replaceState(...): Cannot update during an existing state transition (such as withinrender). Render methods should be a pure function of props and state.

有什么我可以做的解决方法吗？我只需要一个基本函数来反转作为参数传递的状态的布尔值

Answer 1

您是立即调用该函数，而不是更改。

1. React 运行 render;
2. 找到onChange参数；
3. 如果是函数引用，则什么也不会发生；
4. 如果是函数调用，则在代码运行时调用该函数，并将结果作为回调传递给onChange；
5. 当您点击调用函数引用（回调）的复选框时；

您的代码所做的是将this.handleCheckboxChange(this.state.proofDivulgation) 的返回值设置为onChange 的回调。

你需要的是这个：

handleCheckboxChange: function(booleanToSwitch) {
  return function(event) {
    console.log(booleanToSwitch);
    this.replaceState({booleanToSwitch : true})
  };
},

我也很确定你会需要

this.state[booleanToSwitch] = true;

改为。