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

Question

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

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

    };

每当我修改复选框时，我都想更改这些 bool 值(这些 bool 值应该与复选框的选中值相同)。我也得到了这个 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.

我可以做任何解决方法吗？我只需要一个基本函数来反转作为参数传递的状态的 bool 值

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;

相反。