事件

用 onClick、onChange 接收用户操作

要点

点击用 onClick，输入用 onChange 来接收。和 HTML 的 onclick 不同，第二个单词首字母要大写
传入的是“稍后再执行的函数”。写成 onClick={handleClick}，不要加 ()
想带参数调用时，用 () => 包起来：onClick={() => setCount(0)}

动手试试

import { useState } from "react"

export default function App() {
  const [message, setMessage] = useState("还没有点击")

  function handleClick() {
    setMessage("已点击！")
  }

  return (
    <div style={{ padding: 16 }}>
      <button onClick={handleClick}>点我</button>
      <p>{message}</p>
    </div>
  )
}

Open Sandbox

加一个“撤销”按钮，把消息恢复成最初的内容
把 onClick 改成 onMouseEnter，让鼠标移上去就有反应
试试写成 onClick={handleClick()}，加上 () 会怎样

常见错误

onClick={handleClick()} 会在显示的那一刻就执行

加上 () 传进去的是“现在立刻执行的结果”。应该写 onClick={handleClick}，传入函数本身。

事件函数按 handle + 动作来命名

像 handleClick、handleSubmit、handleReset 这样命名，一眼就能看出函数是做什么的。实际项目中也是标准做法。