防止子组件触发父组件的onClick答案

【问题标题】：Prevent child component from triggering parent's onClick防止子组件触发父组件的onClick
【发布时间】：2021-06-11 11:18:48
【问题描述】：

在 React 中使用 Material-ui，我想让 <IconButton> 与 onClick 具有一种行为（快速添加到购物车），并让父 <GridListTile> 具有不同的 onClick 行为（打开该项目的更多信息对话框）。我的问题是，当我点击<IconButton> 时，它会同时执行这两个操作（打开更多信息Dialog 并添加到购物车。有没有办法让<IconButton> 不从父组件继承 onClick？

<GridListTile key={tile.title}>
              <img
                src={`/${tile.img}`}
                alt={tile.title}
                onClick={handleClickOpen()}
              />
              <GridListTileBar
                title={tile.title}
                subtitle={<span>{tile.description}</span>}
                onClick={handleClickOpen()}
                actionIcon={
                  <Tooltip title="add to cart">
                    <IconButton
                      aria-label={`info about ${tile.title}`}
                      className={classes.icon}
                      // onClick={handleClickOpen()}
                      onClick={() => {
                        dispatch({ type: "cart-increment" });
                      }}
                    >
                      <AddShoppingCartIcon />
                    </IconButton>
                  </Tooltip>
                }
              />
            </GridListTile>

【问题讨论】：

标签： javascript reactjs react-router material-ui

【解决方案1】：

在子处理程序中，阻止事件向上传播：

<IconButton
    aria-label={`info about ${tile.title}`}
    className={classes.icon}
    onClick={(e) => {
        e.stopPropagation();
        dispatch({ type: "cart-increment" });
    }}

【讨论】：