React中onClick外调用动态添加checkbox函数失效如何解决

你的代码存在两个核心错误，按下面步骤修改即可恢复功能：

1. 修复generatecheckbox函数的逻辑 #

bind方法只会返回绑定了this和参数的新函数，不会主动执行原函数，你没有调用绑定后的函数，所以addCheckbox从未执行。直接改成直接调用即可：

generatecheckbox() {
  // 直接调用addCheckbox，不需要bind
  this.addCheckbox("krass")
}

2. 修复按钮的onClick绑定写法 #

你给onClick赋值时加了括号this.generatecheckbox()，会导致组件渲染时立刻执行函数，而不是点击时触发。去掉括号，传入函数引用即可：

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

如果要避免每次render都生成新函数，可以提前在constructor里绑定this，或者用类属性箭头函数写法：

// 类属性箭头函数写法，自动绑定this
generatecheckbox = () => {
  this.addCheckbox("krass")
}
// 调用时不需要再bind
<button onClick={this.generatecheckbox}>Add Checkbox</button>

额外优化建议（可选） #

你当前的代码直接修改了state中的原数组，不符合React不可变数据的要求，容易出现渲染异常，建议修改为返回新数组的写法：

修改addCheckbox： #

function addCheckbox(name) {
  this.setState(prevState => ({
    checkboxes: [...prevState.checkboxes, {
      checked: true,
      label: name
    }]
  }))
}

修改toggleCheckbox： #

function toggleCheckbox(index) {
  this.setState(prevState => {
    const newCheckboxes = [...prevState.checkboxes]
    newCheckboxes[index] = {
      ...newCheckboxes[index],
      checked: !newCheckboxes[index].checked
    }
    return { checkboxes: newCheckboxes }
  })
}

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