IconButton onClick 事件在 onLoad 反应中启动

Question

我将以下IconButton显示在每一行旁边，因此对于每一行，我可以执行不同的 API 调用。这些按钮的警报显示在加载？！我该如何解决它？

<IconButton onClick={alert("abc")}>
  <Edit color="action" />
</IconButton>
<IconButton onClick={alert("abc")}>
  <Update color="action" />
</IconButton>
<IconButton onClick={alert("abc")}>
  <Delete color="action" />
</IconButton>

Answer 1

你在onClick中调用函数，这就是为什么它在load上被触发的原因

您可以使用 es6 箭头函数

<IconButton onClick={() => alert("abc")}>
  <Edit color="action" />
</IconButton>
<IconButton onClick={() => alert("abc")}>
  <Update color="action" />
</IconButton>
<IconButton onClick={() => alert("abc")}>
  <Delete color="action" />
</IconButton>