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

Question

使用Z7F789E9571FFE88BFCE3D07B862B18777Z在React中，我想让< onClick <IconButton>具有一种行为，具有onClick （迅速添加到购物车）的行为，并添加了333.33.33.33.23.33.2ly <GridListTile> 我的问题是，当我单击<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>

Answer 1

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

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