React 中统一处理按钮所有鼠标事件的简易方案

在 React 中，可通过复用同一事件处理函数（如 handleMouseEvents）绑定 onClick、onMouseEnter、onMouseLeave 等多个鼠标事件，避免重复代码，实现逻辑复用与 DRY 原则。

在 react 中，可通过复用同一事件处理函数（如 `handlemouseevents`）绑定 `onclick`、`onmouseenter`、`onmouseleave` 等多个鼠标事件，避免重复代码，实现逻辑复用与 dry 原则。

在实际开发中，常需对同一元素响应多种用户交互（如点击、悬停、移出），而为每个事件单独编写逻辑不仅冗余，还易引发维护问题。React 并未提供“通配鼠标事件”的原生单属性（如 onMouseAll），但可通过函数复用这一核心思想优雅解决。

最简洁、推荐的做法是：定义一个通用事件处理器，并将其分别赋值给多个事件 props。如下所示：

import React, { useState } from 'react';function NavigationToggle() {  const [topNavigationBarCollapse, setTopNavigationBarCollapse] = useState(true);  const handleMouseEvents = () => {    setTopNavigationBarCollapse(prev => !prev);  };  return (    <button      className="collapse-button"      onClick={handleMouseEvents}      onMouseEnter={handleMouseEvents}      onMouseLeave={handleMouseEvents}      // 可按需扩展：onMouseDown, onMouseUp, onContextMenu 等    >      ☰    </button>  );}export default NavigationToggle;

✅ 优势说明：

• 真正 DRY：状态切换逻辑仅维护一处，后续修改（如添加日志、防抖、条件判断）只需调整 handleMouseEvents；
• 类型安全：TypeScript 下，所有事件处理器签名兼容 React.MouseEventHandler（尽管 onMouseEnter/onMouseLeave 不触发默认行为，但调用无副作用）；
• 可扩展性强：如需区分事件类型，可在函数内通过 event.type 判断（例如 if (event.type === 'click') { ... }），兼顾统一性与灵活性。

⚠️ 注意事项：

• 避免在 onMouseEnter/onMouseLeave 中执行高开销操作（如 API 请求），因其可能高频触发；本例中仅切换布尔状态，完全安全；
• 若需支持触屏设备，建议额外添加 onTouchStart（移动端等效于点击），提升跨端一致性；
• 不要误用 onMouseMove——它持续触发，直接调用 setState 将导致严重性能问题，应配合节流或仅用于状态标记。

总结：React 的事件系统鼓励“函数即配置”，无需引入第三方库或复杂抽象。通过复用同一个 handler，即可干净、高效、可维护地响应多种鼠标交互——这正是 React 函数组件与 Hooks 范式所倡导的简洁哲学。