如果在 onClick 外部调用，则动态添加复选框不起作用

Question

Link 到 CodeSandbox:CODESANDBOX

我想动态生成复选框如果我只是简单地调用函数 onclick，它就可以很好地工作。我的问题是，如果我在 onclick 之外的某个地方或在另一个函数中调用它，然后调用该函数，它根本不会被调用。

这是我添加复选框的函数，其他两个函数用于切换和渲染。

 function addCheckbox(name) {
  const { checkboxes } = this.state,
    label = name;

  checkboxes.push({
    checked: true,
    label
  });

  this.setState({
    checkboxes
  });
  
}

function toggleCheckbox(index) {
  const { checkboxes } = this.state;

  checkboxes[index].checked = !checkboxes[index].checked;

  this.setState({
    checkboxes
  });
}
function renderCheckboxes() {
  const { checkboxes } = this.state;

  return checkboxes

    .map((checkbox, index) =>
      <div>
        <label>
          <input
            type="checkbox"
            checked={checkbox.checked}
            onChange={toggleCheckbox.bind(this, index)}
          />
          {checkbox.label}
        </label>
      </div>
    );
}

这是我的渲染函数的一部分：

</div>
            {renderCheckboxes.call(this)}
            <input ref="label" type="text" />
            <button onClick={addCheckbox.bind(this,"krass")}>Add Checkbox</button>

现在，当我在另一个函数中调用 addCheckbox 函数时，它不会被调用。像这样：

generatecheckbox()//Outside of render
  {
    addCheckbox.bind(this,"krass")
  }

如果我现在将 OnClick 更改为：

<button onClick={this.generatecheckbox()}>Add Checkbox</button>

没用。我该如何解决？ CodeSandboxLink 供参考： Link:

Answer 1

你的逻辑完全正确，你只需要return

中的函数

generatecheckbox() {
    return addCheckbox.bind(this, "sample");
  }

或

 generatecheckbox() {
    addCheckbox.call(this, "sample");
  }

----

 <button onClick={()=>this.generatecheckbox()}>
          Add checkbox with other call
        </button>

如果在 onClick 外部调用，则动态添加复选框不起作用

Add checkboxes dynamically isn't working if called outside onClick

checkbox

onclick

this

reactjs