ReactJS中如何统一处理按钮的所有鼠标事件？

1. 提取通用事件处理函数 #

首先定义一个复用的状态切换函数，避免重复编写逻辑：

const [topNavigationBarCollapse, setTopNavigationBarCollapse] = useState(true);

// 通用切换函数，用prevState确保状态更新的可靠性
const handleToggleNavigation = () => {
  setTopNavigationBarCollapse(prev => !prev);
};

之后在按钮上直接绑定需要的事件，无需重复写箭头函数：

<button 
  className='collapse-button'
  onClick={handleToggleNavigation}
  onMouseEnter={handleToggleNavigation}
  onMouseLeave={handleToggleNavigation}
>
  &#9776;
</button>

2. 封装事件对象批量绑定 #

如果需要绑定的事件较多，可以把事件集合封装成对象，通过展开运算符一次性绑定到元素上：

// 定义需要绑定的所有鼠标事件
const navigationToggleEvents = {
  onClick: handleToggleNavigation,
  onMouseEnter: handleToggleNavigation,
  onMouseLeave: handleToggleNavigation,
  // 可按需添加onMouseDown、onMouseUp等其他事件
};

// 按钮组件
<button className='collapse-button' {...navigationToggleEvents}>
  &#9776;
</button>

3. 自定义Hook复用逻辑（多组件场景） #

如果多个组件都需要实现相同的导航栏切换逻辑，封装成自定义Hook可以最大化复用：

import { useState } from 'react';

// 自定义Hook：封装导航栏折叠状态与切换逻辑
const useNavigationCollapse = (initialState = true) => {
  const [isCollapsed, setIsCollapsed] = useState(initialState);
  
  const toggleCollapse = () => {
    setIsCollapsed(prev => !prev);
  };

  // 返回状态、切换函数，以及预定义的事件集合
  return {
    isCollapsed,
    toggleCollapse,
    collapseEvents: {
      onClick: toggleCollapse,
      onMouseEnter: toggleCollapse,
      onMouseLeave: toggleCollapse,
    }
  };
};

在组件中使用：

const { isCollapsed, collapseEvents } = useNavigationCollapse();

<button className='collapse-button' {...collapseEvents}>
  &#9776;
</button>

4. 多元素批量处理 #

如果有多个元素需要绑定相同的事件集合，直接复用事件对象即可：

const navigationToggleEvents = {
  onClick: handleToggleNavigation,
  onMouseEnter: handleToggleNavigation,
  onMouseLeave: handleToggleNavigation,
};

// 多个元素共用同一套事件绑定
<button className='collapse-button' {...navigationToggleEvents}>按钮1</button>
<button className='collapse-button' {...navigationToggleEvents}>按钮2</button>
<div className='sidebar-trigger' {...navigationToggleEvents}>侧边栏触发区</div>

内容的提问来源于stack exchange，提问作者Karley