如何处理按钮数组处理 ReactJs 中的点击事件

Question

我的反应 class 组件我试过这种方式。但是一旦它呈现，警报弹出窗口就会一直出现，而无需单击任何按钮。

onHandleOnClick(data, e) {
console.log(data);
alert("got it" + data);
  }

renderRating(){
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return arr.map((val) => {
  return (
    <button
     
      onClick={this.onHandleOnClick(val)}
    >
      {val}
    </button>
  );
 });
};

render() {
return (
  <div>
    {this.renderRating()}
 </div>
)
}

我是 React 新手。我该怎么做？

Answer 1

您正在调用该函数，而不是将其分配给 onClick 事件。

由于您需要将参数传递给回调，因此您可以将匿名函数传递给 onClick。请注意，要同时捕获 React 隐式传递的 event，您应该将其作为匿名函数中的参数传递。

onClick={(e) => this.onHandleOnClick(val, e)}

如何处理按钮数组处理 ReactJs 中的点击事件

how to handle array of buttons handle click event in ReactJs

javascript

event-handling

reactjs