事件处理与合成事件系统

function EventDemo() {
  function handleClick() {
    alert("点到了！");
  }

  return (
    <button onClick={handleClick}>点我</button>
  );
}

// 原生：addEventListener
btn.addEventListener("click", handleClick);

// React：直接在 JSX 上声明
<button onClick={handleClick}>...</button>

function handleChange(e) {
  console.log(e.target.value);      // 触发事件的元素（输入框 → 当前输入值）
  console.log(e.type);              // 事件类型，如 "change"
  e.preventDefault();               // 阻止浏览器默认行为
  e.stopPropagation();              // 阻止事件继续冒泡
}

import { useState } from "react";

function LoginForm({ onLogin }) {
  const [name, setName] = useState("");

  function handleSubmit(e) {
    e.preventDefault();          // ← 拦住浏览器的整页刷新
    if (!name.trim()) return;    // 参数校验（对应后端 @Valid）
    onLogin(name);               // 剩下的交给父组件 / 请求层
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={name} onChange={e => setName(e.target.value)} />
      <button type="submit">登录</button>
    </form>
  );
}

<li onClick={() => openDetail(item.id)}>
  {item.name}
  <button onClick={(e) => {
    e.stopPropagation();          // 事件到此为止，不再冒泡到 li
    remove(item.id);
  }}>删除</button>
</li>

function List({ users }) {
  function del(id) { console.log("删除", id); }

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {/* ❌ 错误：渲染时立刻执行了 del(id)，而不是点击时 */}
          <button onClick={del(user.id)}>删</button>

          {/* ✅ 正确：返回一个新函数，点击时才调用 */}
          <button onClick={() => del(user.id)}>删</button>
        </li>
      ))}
    </ul>
  );
}