为什么这个onClick函数在输入时被触发

Question

我真的很困惑，因为我正在学习使用钩子，而且我正在使用useState钩子，当我偶然发现这一点时，当我输入时，onClick函数会被触发。

这是代码：

import React, {useState} from 'react'
function Hooks() {
const [count, setInput] = useState("");
return (
<React.Fragment>
<input value={count} onChange={(e) => {setInput(e.target.value)}}>
</input>
<button className="btn" value="See Input!" onClick={console.log(count)}>
Click here!
</button>
</React.Fragment>
)
}
export default Hooks

当我在输入字段上键入时，计数会被记录下来，这就是我修复它的方法：

import React, {useState} from 'react'
function Hooks() {
const [count, setInput] = useState("");
return (
<React.Fragment>
<input value={count} onChange={(e) => {setInput(e.target.value)}}>
</input>
<button className="btn" value="See Input!" onClick={() => {console.log(count)}}>
Click here!
</button>
</React.Fragment>
)
}
export default Hooks

正如你所看到的，唯一改变的是，我没有把onClick的事件写成箭头函数，而是只写了这行代码。我知道这不起作用，但为什么每当我在输入中写任何东西时都会调用它？

提前感谢！

Answer 1

onClick函数接受一个函数。在第一种情况下，您通过在函数周围添加括号来调用函数。当状态被更新时，返回被呈现，它调用onCLick上的consol.log((。

在第二种情况下，您已经通过了函数定义，但您没有调用它

当用户点击按钮时调用该函数