为什么在输入时会触发此 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函数接受一个函数。在第一种情况下，您通过在周围添加括号来调用该函数。当状态更新时 return 被渲染，它在 onCLick 上调用 consol.log()。

在第二种情况下，您已经传递了函数定义并且没有调用它。

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

为什么在输入时会触发此 onClick 函数？

Why is this onClick function getting triggered when typing on input?

reactjs

react-hooks

use-state