TypeScript中a标签onClick的preventDefault失效问题求助

核心问题1：onClick事件绑定错误 #

你当前的onClick={(e) => handleClick}只是返回了函数引用，并没有调用函数，导致e.preventDefault()根本没有执行，点击a标签时会触发默认的跳转行为（href为空时刷新当前页面）。

正确的绑定方式有两种：

• 直接绑定函数引用：onClick={handleClick}（React会自动把事件对象传入函数）
• 显式调用函数并传参：onClick={(e) => handleClick(e)}

核心问题2：事件类型定义错误 #

React.ChangeEvent<EventTarget>是用于表单元素（如input、select）的变化事件，而a标签的点击事件应该使用React.MouseEvent<HTMLAnchorElement>类型。错误的类型可能导致TypeScript类型检查报错，甚至影响事件方法的正常调用。

修正后的代码 #

修正后的a标签：

<p>
  <a
    onClick={handleClick}
    href=""
    style={{ textDecoration: "none" }}
  >
    &lt;Return to cart
  </a>
</p>

修正后的handleClick函数：

const handleClick = (e: React.MouseEvent<HTMLAnchorElement>): void => {
  e.preventDefault();
  closeForm();
};

关于是否用button替代a标签 #

如果这个元素的作用是触发动作（关闭表单、切换回购物车视图），而非跳转到新URL，使用<button>标签更符合HTML语义化规范，且无需处理href的默认跳转行为：

<p>
  <button
    onClick={closeForm}
    style={{ 
      textDecoration: "none", 
      background: "none", 
      border: "none", 
      cursor: "pointer",
      padding: 0,
      color: "inherit"
    }}
  >
    &lt;Return to cart
  </button>
</p>

此时不需要额外调用e.preventDefault()，button默认不会触发页面刷新，代码更简洁。

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