React中Offcanvas子按钮被父组件误触发且自身失效问题

核心问题定位 #

你遇到的问题大概率是事件绑定方式错误：子组件按钮的onClick直接调用了函数（而非传递函数引用），导致Offcanvas打开/关闭时（组件渲染/重渲染）就触发了handleUpgradeBuy，而真正点击按钮时反而没有正确绑定事件。

具体排查与解决步骤 #

1. 修正子组件ShopItems.js的按钮绑定 #

先检查子组件里的按钮代码，这是最常见的触发源：

• 错误写法（组件渲染时立即执行函数）：

// 错误：Offcanvas打开时就会调用handleUpgradeBuy(item)
<button onClick={handleUpgradeBuy(item)}>购买升级</button>

• 正确写法（点击按钮时才执行函数）：

// 正确：仅在点击按钮时触发逻辑
<button onClick={() => handleUpgradeBuy(item)}>购买升级</button>

2. 父组件ShopAssortment.js优化函数传递（可选） #

如果想避免子组件不必要的重渲染，可以用useCallback缓存处理函数：

import { useCallback } from 'react';

function ShopAssortment({ items, handleUpgradeBuy }) {
  // 缓存带参数的处理函数，依赖项变化时才重新创建
  const handleBuyItem = useCallback((item) => {
    handleUpgradeBuy(item);
  }, [handleUpgradeBuy]);

  return (
    <div>
      {items.map(item => (
        <ShopItems key={item.id} item={item} handleUpgradeBuy={handleBuyItem} />
      ))}
    </div>
  );
}

子组件保持正确的绑定写法即可。

3. 排查事件冒泡（次要情况） #

如果上述修改后仍有异常，检查Offcanvas的点击事件是否冒泡到子按钮：
给子按钮添加事件阻止冒泡：

<button onClick={(e) => {
  e.stopPropagation();
  handleUpgradeBuy(item);
}}>购买升级</button>

验证标准 #

修改完成后：

• 点击祖父组件的"Open shop"按钮，子按钮的handleUpgradeBuy不会触发
• 直接点击子按钮，handleUpgradeBuy能正常执行

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