React中阻止默认按钮行为的有效方案咨询

首先得说，你当前的写法其实存在隐藏的逻辑错误——虽然看起来能运行，但并不是正确的事件处理方式，咱们一步步拆解清楚：

你当前写法的问题 #

你写的这段代码：

onClick={e => addToFavorites({ id }, addFav(e))}

这里的addFav(e)是组件渲染时就立即执行的，而不是点击按钮的时候才触发。也就是说，每次组件重新渲染，addFav(e)都会被调用一次，但此时e是undefined（还没触发点击事件），只是你的场景里这个错误没暴露出来而已。而且addToFavorites接收的第二个参数是addFav(e)的返回值（也就是undefined），完全达不到你“点击时阻止滚动”的预期逻辑。

正确的实现方式 #

要在点击按钮时先阻止滚动（或默认行为），再执行收藏逻辑，你应该把所有逻辑整合到同一个点击回调里：

// 定义统一的点击处理函数
const handleFavoriteClick = (e) => {
  // 阻止事件默认行为，如果按钮在表单内，这会阻止表单提交；若要阻止滚动相关的冒泡行为，也可改用e.stopPropagation()
  e.preventDefault();
  
  // 调用传入的收藏方法
  addToFavorites({ id });
};

// 按钮绑定这个处理函数
<Button 
  className={favorites ? styles.active : styles.outlines} 
  onClick={handleFavoriteClick} 
  variant='outline'
>
  {/* 你的按钮文本，比如"加入收藏" */}
</Button>

如果想把阻止行为抽成单独函数复用，也可以这么写：

const preventDefault = (e) => {
  e.preventDefault();
};

const handleFavoriteClick = (e) => {
  preventDefault(e);
  addToFavorites({ id });
};

额外场景补充 #

如果点击按钮导致页面滚动的原因不是默认行为（比如按钮在可滚动容器内，点击时容器滚动），可以临时禁用页面滚动：

const handleFavoriteClick = (e) => {
  e.preventDefault();
  // 临时禁用页面滚动
  document.body.style.overflow = 'hidden';
  // 如果addToFavorites是异步方法，操作完成后恢复滚动
  addToFavorites({ id }).finally(() => {
    document.body.style.overflow = '';
  });
};

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