Reactjs 未定义循环内的反应事件绑定

在返回之前，我在react render方法的循环中添加了一个click事件，代码如下

renderedCheckboxes = content.map( function(f, i) {
                if ( f['acf_fc_layout'] === 'checkbox' ) {
                    let id="customCheck" + i;
                    return (
                        <li className="list-group-item" key={i}>
                        <div className="custom-control custom-checkbox">
                            <input type="checkbox" name={f.checkbox} onClick={this.handleClick.bind(this) } className="custom-control-input" id={id} />
                            <label className="custom-control-label" htmlFor={id}>{f.label}</label>
                        </div>
                        </li>
                    )
                }
            });

renderedcheckbox=content.map（函数（f，i）{
如果（f['acf\U fc\U布局]=='复选框'）{
让id=“customCheck”+i；
返回(

{f.label}

)
}
});

但当我点击复选框时，我得到了

TypeError:无法读取未定义的属性“handleClick”

---

在这种情况下我做错了什么？

更改为箭头功能，以便

此

在范围内：

renderedCheckboxes = content.map((f, i) => {
  if ( f['acf_fc_layout'] === 'checkbox' ) {
    let id="customCheck" + i;
    return (
      <li className="list-group-item" key={i}>
        <div className="custom-control custom-checkbox">
          <input type="checkbox" name={f.checkbox} onClick={this.handleClick.bind(this) } className="custom-control-input" id={id} />
          <label className="custom-control-label" htmlFor={id}>{f.label}</label>
        </div>
      </li>
    )
  }
});

renderedcheckbox=content.map（（f，i）=>{
如果（f['acf\U fc\U布局]=='复选框'）{
让id=“customCheck”+i；
返回(

{f.label}

)
}
});

您的

此.handleClick

不存在于map函数的scrop中。通过写入

const=this来缓存它，并使用.handleClick

I susperect

此.handleClick

在map函数的上下文中不存在。通过写入

const=this来缓存它在地图功能之前，使用
该功能。handleClick
谢谢！这就是问题超出范围的原因，因为map函数被接受的方法被描述为一种可以通过arrow函数避免的黑客行为。它会起作用，但不是最佳实践。