Material-UI Dialog点击取消按钮无法关闭问题求助

问题根源 #

Dialog嵌套在绑定了handleClickOpen的<Box>组件内部，点击Cancel按钮时，按钮的onClick触发handleClose将open设为false，但事件冒泡会让父级<Box>的onClick也被触发，重新把open设为true，导致Dialog无法关闭。

修复方案 #

方案1：阻止按钮点击事件冒泡

给按钮的点击处理函数添加事件阻止冒泡逻辑：

const handleClose = (e) => {
  e.stopPropagation();
  console.log('in close');
  setOpen(false);
};

const handleSubmit = async (e) => {
  e.stopPropagation();
  try {
    const response = await fetch("/api/rate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ rating }),
    });

    if (response.ok) {
      const result = await response.json();
      console.log("Rating result：", result);
      if (onSubmitRating) {
        onSubmitRating(rating);
      }
    } else {
      console.error("Rating error");
    }
  } catch (error) {
    console.error("Error：", error);
  } finally {
    handleClose({ stopPropagation: () => {} });
  }
};

按钮调用时自动传递事件参数：

<Button onClick={handleClose}>Cancel</Button>
<Button onClick={handleSubmit} color="primary">
  rate
</Button>

方案2：将Dialog移到Box外部

把Dialog从Box的子元素中提取出来，脱离父级的事件影响：

return (
  <>
    <Box
      sx={{
        alignItems: 'center',
        display: 'grid',
        gridGap: 'var(--PropertyItem-gap, 8px)',
        gridTemplateColumns: 'var(--PropertyItem-columns)',
        p: 'var(--PropertyItem-padding, 8px)',
        '@media (max-width: 600px)': {
          gridTemplateColumns: '1fr',
        },
        cursor: "pointer",
      }}
      onClick={handleClickOpen}
    >
      <div>
        <Typography color="text.secondary" variant="body2">
          Rating
        </Typography>
      </div>
      <div>
        <Rating
          value={initialRating}
          readOnly
          style={{ cursor: "pointer" }}
        />
      </div>
    </Box>
    <Dialog open={open} onClose={handleClose}>
      <DialogTitle>Please give your rating</DialogTitle>
      <DialogContent>
        <Rating
          value={rating}
          onChange={(event, newValue) => setRating(newValue)}
        />
      </DialogContent>
      <DialogActions>
        <Button onClick={handleClose}>Cancel</Button>
        <Button onClick={handleSubmit} color="primary">
          rate
        </Button>
      </DialogActions>
    </Dialog>
  </>
);

方案对比 #

• 方案1无需调整组件结构，仅通过事件处理解决问题，适合快速修复。
• 方案2更符合组件设计逻辑，弹窗类组件通常不应嵌套在触发元素内部，能避免后续潜在的事件冲突。

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