为什么这个 onClick function 在输入时被触发？

Question

我真的很困惑，因为我正在学习使用钩子并且我正在使用 useState 钩子，当我偶然发现这个时，当我在输入上键入时，onClick function 被触发。

这是代码：

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的事件写成箭头function，而是只写了这行代码。 我会理解这行不通，但是为什么每当我在输入中写任何内容时都会调用它？

提前致谢！

Answer 1

onClick function 采用 function。 在第一种情况下，您通过添加括号来调用 function。 当 state 得到更新时，返回被渲染，它调用 onCLick 上的 consol.log()。

在第二种情况下，您已经通过了 function 定义并且您没有调用它。

当用户单击按钮时，将调用 function