事件处理

这一课你将能做到

1. 正确书写 onClick / onChange，避免「渲染时就被调用」
2. 在事件里调用 setState
3. 在表单 onSubmit 里使用 preventDefault

为什么要学

本站几乎所有按钮：切走法、提交「留一句」、打开抽屉，都是事件。
React 的事件写在 JSX 上：onClick={...}。

人话：你把「被点了要干什么」写成一个函数，交给按钮；用户点的时候 React 再帮你调用。

最常见事故：写成 onClick={handle()}——多了一个括号，渲染时就执行，而不是点击时。结果页面一出来就弹窗、请求已经发出去了。

先建立图像

用户点击 → React 调用你传入的函数 → 函数里 setState → 重新渲染

函数要用引用交给 onClick，不是把「调用的结果」交出去。

跟着做

步骤 1：正确 vs 错误（先刻在脑子里）

function handleClick() {
  console.log("clicked");
}

export function Demo() {
  return (
    <>
      {/* 正确：把函数交给 onClick */}
      <button type="button" onClick={handleClick}>A</button>
      <button type="button" onClick={() => handleClick()}>B</button>

      {/* 错误：渲染时立刻执行，返回值还不是函数 */}
      {/* <button type="button" onClick={handleClick()}>C</button> */}
    </>
  );
}

需要传参数时用箭头包一层，否则 remove(id) 会立刻跑：

<button type="button" onClick={() => remove(id)}>删除</button>

步骤 2：和 state 联动

import { useState } from "react";

function Like() {
  const [n, setN] = useState(0);
  return (
    <button type="button" onClick={() => setN((x) => x + 1)}>
      赞 {n}
    </button>
  );
}

点击 → 更新记忆 → React 再画按钮上的数字。不要在 onClick 里去改 button.textContent。

步骤 3：提交表单（整页刷新是默认行为）

浏览器里 <form> 点提交会导航/刷新。SPA 里通常要拦住：

import { useState } from "react";

function SearchBox() {
  const [q, setQ] = useState("");

  function onSubmit(e) {
    e.preventDefault(); // 拦住默认刷新
    alert("搜索：" + q);
  }

  return (
    <form onSubmit={onSubmit}>
      <label>
        关键词
        <input value={q} onChange={(e) => setQ(e.target.value)} />
      </label>
      <button type="submit">搜</button>
    </form>
  );
}

这里已经是受控输入雏形：输入框的值来自 state。表单课会加深校验和 disabled。