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 中调用该函数，这就是它被触发 onLoad 的原因

您可以使用 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>