点击React按钮，为什么这个语法有效，其他不起作用

Question

我是React的新生。还有，对不起，我英语不好。

3天前，我想在单击按钮时更改按钮值的state。所以，我只是简单地这样编码。

/* SKIP CODE */
const [state, setState] = useState("");
/* SKIP CODE*/
<button onClick={setState("&timespan=PT1H")}>1 hour</button>
/* SKIP CODE*/

但这不起作用。所以我在谷歌上搜索了3天，终于这样解决了。

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

但是，我不知道为什么。你能很容易地解释我吗？

Answer 1

在中

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

您正在将setState("&timespan=PT1H")的结果分配给onClick，因此当按钮调度onClick方法时，它不会执行任何函数，因为它分配了一个值，而不是函数。

但是，在<button onClick={() => {setState("&timespan=PT1H")}}>1 hour</button>中，您要将函数分配给onClick，因此每次按钮调度方法onClick时，它都会执行函数setState。

Answer 2

React on render调用函数调用，因此它被用作变量并按需调用以进行性能优化。

const callMe = () => {
console.log('i am called when the button was clicked not on render');
}
<Button onClick={callMe} />

Answer 3

onClick需要一个回调函数，您需要传递该函数。在您传递箭头函数作为回调的情况下，您也可以将一个普通函数传递给onClick事件。

function onBtnClick(){
//do the action here.
}
<button onClick={onBtnClick}>Click Me!</button>

或者你可以使用箭头功能：

const onBtnClick = () => {
//do the action here.
}
<button onClick={onBtnClick}>Click Me!</button>

或者，您可以内联传递一个箭头函数。

<button onClick={() => { //do the action here }}>Click Me!</button>

如果您的函数返回一行代码，就像您的情况一样，则不需要括号：

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