React+TypeScript中如何为a标签的click点击事件传递参数？

API 探路者

2026-10-5

React a标签点击事件传递自定义参数实现方案

这个需求完全可以实现，属于React事件处理的常规操作，没有使用限制。

方案1：内联箭头函数包裹传参（最常用，写法最简单）

首先调整函数定义，新增step参数接收你要传入的1/-1：

const slideShow = (step: number, e: React.MouseEvent<HTMLAnchorElement>): void => {
  e.preventDefault(); // 阻止a标签默认跳转行为，按需添加
  console.log('触发的步长：', step);
  console.log('事件对象：', e);
}

修改JSX的onClick绑定逻辑，用箭头函数包裹原函数，主动传入参数和事件对象：

<div className="slider">
  <a className="prev" onClick={(e) => slideShow(-1, e)}>Previous</a>
  <h2>Barking Road, London</h2>
  <a className="next" onClick={(e) => slideShow(1, e)}>Next</a>
</div>

方案2：自定义dataset属性传参（无需额外创建函数，适合大量元素渲染场景）

不需要修改函数的参数结构，直接给a标签添加自定义data属性存储参数，函数内部从事件对象读取即可：

const slideShow = (e: React.MouseEvent<HTMLAnchorElement>): void => {
  e.preventDefault();
  const step = Number(e.currentTarget.dataset.step);
  console.log('触发的步长：', step);
  console.log('事件对象：', e);
}

JSX部分添加data-step属性：

<div className="slider">
  <a className="prev" data-step="-1" onClick={slideShow}>Previous</a>
  <h2>Barking Road, London</h2>
  <a className="next" data-step="1" onClick={slideShow}>Next</a>
</div>