如何使用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;

代替。