ReactJS中如何为onMouseDown函数传入额外参数？

要在onMouseDown事件中传递自定义的url参数，同时保留鼠标事件对象e，有几种常用的实现方式：

方法1：箭头函数直接传参 #

在事件绑定处用箭头函数包裹，手动传入事件对象和目标url：

const handleMouseDownHome = (e: React.MouseEvent<HTMLDivElement>, url: string) => {
  // 仅在鼠标滚轮键（中键）点击时触发
  if (e.button === 1) {
    window.open(url, "_blank", "noopener,noreferrer");
  }
};

// 组件中使用
<div onMouseDown={(e) => handleMouseDownHome(e, "/")}>
  ...
</div>

方法2：柯里化函数 #

把函数改成柯里化形式，先接收url参数，返回一个处理事件的函数：

const handleMouseDownHome = (url: string) => (e: React.MouseEvent<HTMLDivElement>) => {
  if (e.button === 1) {
    window.open(url, "_blank", "noopener,noreferrer");
  }
};

// 组件中使用
<div onMouseDown={handleMouseDownHome("/")}>
  ...
</div>

方法3：bind绑定参数 #

通过Function.bind()预先绑定url参数，事件对象会自动作为第一个参数传入：

const handleMouseDownHome = (url: string, e: React.MouseEvent<HTMLDivElement>) => {
  if (e.button === 1) {
    window.open(url, "_blank", "noopener,noreferrer");
  }
};

// 组件中使用
<div onMouseDown={handleMouseDownHome.bind(null, "/")}>
  ...
</div>

额外优化：类型规范 #

建议避免使用any类型，改用更具体的类型声明：

• 事件对象用React.MouseEvent<HTMLDivElement>（对应div元素的鼠标事件）
• url参数用string类型，更符合实际场景

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