如何防止 MUI 手风琴扩展？

Question

我正在使用 MUI 中的两个组件，accordion 和 Modal。我在手风琴摘要上有模态框，但是当我打开它时，每次我在模态框内单击时，手风琴也会收到交互，因此它会展开。我将 Modal 的打开状态传递给手风琴，并尝试根据打开状态进行更改。喜欢

pointerEvents:`${open == true? 'none': 'auto'}`

在禁用的情况下尝试过类似的操作，但它仍然是一样的。我这里有代码示例 https://stackblitz.com/edit/react-ts-zer8p7?file=accordion.js

提前致谢

Answer 1

这里的问题是您的点击事件在组件树中冒泡，直到它被手风琴摘要消耗掉。您可以使用事件 stopPropagation 函数在层次结构中的任何位置停止此操作。您可以将 BaseModal 组件更改为如下所示：

export default function BasicModal() {
   const [open, setOpen] = React.useState(false);
   const handleOpen = () => setOpen(true);
   const handleClose = () => setOpen(false);

   const onModalClick = (e) => {
      e.stopPropagation();
   };
  
   return (
      <div onClick={onModalClick}>
         <Button onClick={handleOpen}>Open modal</Button>
         <Modal
             open={open}
             onClose={handleClose}
             aria-labelledby="modal-modal-title"
             aria-describedby="modal-modal-description"
         >
            <Box sx={style}>
               <Typography id="modal-modal-title" variant="h6" component="h2">
                  Text in a modal
               </Typography>
               <Typography id="modal-modal-description" sx={{ mt: 2 }}>
                  <TemporaryDrawer />
               </Typography>
            </Box>
         </Modal>
      </div>
    );
}

onModalClick 接收点击事件并阻止它向上传播组件树到手风琴摘要。

如何防止 MUI 手风琴扩展？

How to keep MUI accordion from expanding?

reactjs

material-ui