Button 事件绑定技巧

事件绑定是 Button 组件与用户交互的核心环节。除了最基础的 click 事件监听，生产环境中还普遍要求处理防重复提交（防止用户频繁点击导致请求重复）以及带参数回调（将组件内数据或上下文信息传递给处理函数）。本章从这三个方面展开，并给出可直接接入的代码示例与调试建议。

2.1 click 事件的标准绑定方式

目前主流的前端框架（React、Vue、原生 JS）绑定 click 事件的写法已基本统一，区别在于模板语法和生命周期管理。下表对比三种常见场景下的绑定写法：

基础 click 绑定的最小可运行代码：

<!-- React 示例 -->
import React from 'react';

function App() {
  const handleClick = (e) => {
    console.log('Button clicked', e);
  };

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

export default App;

2.2 防重复提交

当 Button 触发异步请求（如提交表单、发送 API）时，用户连续快速点击会导致请求并发，造成数据异常或后端压力。常见的防重复方案有禁用按钮、节流（throttle）和锁标记。推荐在组件内部维护一个布尔状态 loading，在请求期间禁止交互。

// 防重复提交核心逻辑（React + Hooks）
import { useState } from 'react';

function SubmitButton() {
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    if (loading) return;                 // 请求未完成则直接忽略
    setLoading(true);
    try {
      await fetch('/api/submit', { method: 'POST' });
      console.log('提交成功');
    } catch (err) {
      console.error('提交失败', err);
    } finally {
      setLoading(false);                 // 无论成功失败都恢复按钮状态
    }
  };

  return (
    <button onClick={handleSubmit} disabled={loading}>
      {loading ? '提交中…' : '提交'}
    </button>
  );
}

2.3 带参数回调

实际业务中经常需要将按钮所在行的数据（如 id、row 对象）传递给事件处理函数。带参数回调的写法有闭包捕获与箭头函数两种，注意避免性能陷阱。

// 带参数回调的正确写法（React）
function ItemList({ items, onDelete }) {
  const handleDelete = (id) => (e) => {
    // e 为原生事件对象
    e.stopPropagation();
    onDelete(id);
  };

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          <button onClick={handleDelete(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

此写法通过高阶函数生成新函数，每次渲染时 handleDelete(item.id) 返回一个携带 id 的新回调。若对渲染性能敏感，可以使用 useCallback + 缓存参数的方式：

// useCallback 优化版本
function ItemList({ items, onDelete }) {
  const handleDelete = useCallback(
    (id) => (e) => {
      e.stopPropagation();
      onDelete(id);
    },
    [onDelete]   // 依赖仅含 onDelete，items 变化不重新创建
  );

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          <button onClick={handleDelete(item.id)}>删除</button>
        </li>
      ))}
    </ul>
  );
}

2.4 事件绑定完整流程

下面这张 SVG 图展示了从用户点击到回调函数执行的典型链路，涵盖事件传递、防重复检查与参数传递：

2.5 常见错误 & 调试技巧

• 错误：onClick={handleClick()} 立即执行 —— 括号导致函数在渲染时立刻运行，返回 undefined 作为事件处理器。应写为 onClick={handleClick} 或 onClick={() => handleClick()}。
• 错误：防重复中只禁用 UI 未设置状态锁 —— 使用 disabled 时仍需通过 loading 变量阻止回调逻辑，因为 disabled 在触屏/延时工具下可能被绕过。
• 错误：带参数回调直接 event => handler(param, event) —— 参数顺序混乱。推荐使用高阶函数 handler = (param) => (event) => { ... } 保持第一参数为业务数据，第二参数为原生事件。

2.6 小结