React: 事件处理

// 原生 JS：需要手动处理各种兼容性和细节

// 1. 获取 DOM 元素
const form = document.getElementById('register-form')
const nameInput = document.getElementById('name')
const submitBtn = document.getElementById('submit-btn')

// 2. 绑定事件
form.addEventListener('submit', function(event) {
  event.preventDefault()  // 阻止页面刷新
  
  // 3. 手动获取表单数据
  const formData = new FormData(form)
  const data = Object.fromEntries(formData)
  
  // 4. 提交数据
  fetch('/api/register', {
    method: 'POST',
    body: JSON.stringify(data)
  })
})

// 5. 输入实时校验
nameInput.addEventListener('input', function(event) {
  if (event.target.value.length < 2) {
    showError('姓名至少 2 个字符')
  } else {
    hideError()
  }
})

// 6. 点击提交按钮时防止重复提交
let isSubmitting = false
submitBtn.addEventListener('click', function() {
  if (isSubmitting) return
  isSubmitting = true
  submitBtn.disabled = true
  submitBtn.textContent = '提交中...'
})

...
点击了 "Log In" 按钮
按钮被鼠标悬停
鼠标离开按钮

带邮箱/密码的登录表单。邮箱无效 → 红色边框 + "The email address format is incorrect."。密码少于 6 位 → "Password must be at least 6 chars"。提交 → console.log({email, password})

function UserList({ users, onDelete }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name}
          {/* 箭头函数：传入 user.id 作为额外参数 */}
          <button onClick={() => onDelete(user.id)}>
            删除
          </button>
        </li>
      ))}
    </ul>
  )
}

// 使用
<UserList
  users={users}
  onDelete={(id) => console.log('删除用户：', id)}
/>

function ColorPicker({ colors, onSelect }) {
  return (
    <div>
      <p>选择颜色：</p>
      {colors.map(color => (
        <button
          key={color}
          onClick={(event) => {
            // event：原生合成事件对象
            // color：自定义参数
            onSelect(color)
            console.log('点击位置：', event.clientX, event.clientY)
          }}
          style={{
            backgroundColor: color,
            width: '40px',
            height: '40px',
            border: '2px solid #ddd',
            borderRadius: '50%',
            margin: '4px',
            cursor: 'pointer'
          }}
        />
      ))}
    </div>
  )
}

... ('Log In：', { email, password })
点击了 "Log In" 按钮
按钮被鼠标悬停
鼠标离开按钮

自动聚焦输入框。Ctrl+S → "💾 Saved (Ctrl+S)"，Ctrl+Z → "↩️ Undo (Ctrl+Z)"，Escape → 清空，Enter → "✅ Confirm: [text]"。显示已按下的按键。

副标题："⌨️ Shortcut Keys Panel"。显示："⌨️ Shortcut Keys Panel"。输入框：Type here，Try the shortcut keys...。useEffect 管理副作用。useRef 引用 DOM/变量

4 个可拖拽项（Apple、Banana、Cherry、Date）。拖拽以重新排序；被拖拽的项显示蓝色高亮边框。

显示："Drag to Reorder"。状态：items（setter: setItems）、dragIdx（setter: setDragIdx）

useEventListener hook：自动添加/移除 DOM 事件监听器。卸载时清理以防止内存泄漏

状态：pos（setter: setPos）。useEffect 管理副作用。useCallback 记忆化处理函数

function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('')
  const [category, setCategory] = useState('all')

  function handleSubmit(e) {
    e.preventDefault()
    onSearch({ query, category })
  }

  function handleReset() {
    setQuery('')
    setCategory('all')
  }

  return (
    <form onSubmit={handleSubmit} style={{ maxWidth: 400, margin: '0 auto' }}>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <input value={query} onChange={e => setQuery(e.target.value)}
          placeholder="Search..." style={{ flex: 1, padding: 8, borderRadius: 4 }} />
        <select value={category} onChange={e => setCategory(e.target.value)}
          style={{ padding: 8, borderRadius: 4 }}>
          <option value="all">All</option>
          <option value="electronics">Electronics</option>
          <option value="books">Books</option>
        </select>
      </div>
      <div style={{ display: 'flex', gap: 8 }}>
        <button type="submit" style={{ padding: '6px 16px', cursor: 'pointer' }}>Search</button>
        <button type="button" onClick={handleReset} style={{ padding: '6px 16px', cursor: 'pointer' }}>Reset</button>
      </div>
    </form>
  )
}

搜索栏 + 分类下拉框（All/Electronics/Books）。搜索提交 {query, category}。重置清空两个字段。