React中button的onClick事件两种写法为何一种生效一种不生效？

两种写法的核心差异与原理 #

React的onClick事件要求接收一个函数类型的值，这个函数会在用户点击按钮时被触发执行，两种写法的本质区别就是你传给onClick的内容类型不一样：

1. 第一种错误写法的问题

你的代码是：

<button onClick={setState("&timespan=PT1H")}>1 hour</button>

这里你直接写了setState("&timespan=PT1H")，相当于在JSX渲染的阶段就立刻执行了setState调用，然后把setState的返回值（React的setState没有返回值，也就是undefined）传给了onClick。
这会导致两个问题：

• 点击按钮时，onClick拿到的是undefined，没有可执行的逻辑，所以点击没反应
• 渲染阶段就调用setState会触发组件重渲染，重渲染又会再次调用setState，陷入无限重渲染的死循环

2. 第二种正确写法的逻辑

你的代码是：

<button onClick={() => {setState("&timespan=PT1H")}}>1 hour</button>

这里的() => {setState("&timespan=PT1H")}是一个没有被调用的箭头函数，你是把这个函数本身传给了onClick。
组件渲染阶段只会把这个函数存起来，不会执行里面的setState逻辑，只有当用户真的点击按钮时，React才会调用这个箭头函数，执行里面的setState修改状态，完全符合你的需求。

通俗类比

你可以把onClick理解为给按钮留的「待执行任务位」：

• 错误写法相当于你布置任务的时候就直接把活干完了，给按钮留了个「任务已完成」的空标识，点击的时候自然没反应
• 正确写法相当于你把要做的事打包成一个任务手册交给按钮，告诉它只有被点击的时候才按手册干活

额外写法参考

如果你不想在JSX里写箭头函数，也可以把点击逻辑单独抽成函数，注意传值的时候不要加括号：

// 单独定义点击逻辑
const handleClick = () => {
  setState("&timespan=PT1H")
}
// 传函数本身给onClick，不要加()
<button onClick={handleClick}>1 hour</button>

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