如何折叠React MUI Accordion onblur答案

【问题标题】：How to collapse React MUI Accordion onblur如何折叠React MUI Accordion onblur
【发布时间】：2022-11-26 01:34:45
【问题描述】：

我的 React 项目中有一个 MUI 手风琴，我希望它在用户单击页面上的其他位置时折叠。

我想通过 css 执行此操作，因为我正在通过 css 执行以下操作：

.focus {
    /* border: 2px solid red !important; */
    background-color: white !important;
}

                <Accordion>
                  <AccordionSummary
                    focusVisibleClassName='focus'
                    expandIcon={<ExpandMoreIcon />}
                    aria-controls="panel1a-content"
                    id="panel1a-header"
                  >
                    <TextField
                      style={{ width: 350 }}
                      id="entityName"
                      value={entity.entityName}
                      onChange={(event) => {
                        setEntity({ ...entity, entityName: event.target.value });
                      }}
                    />
                  </AccordionSummary>
                  <AccordionDetails sx={{ borderTop: '1px dashed black', width: 400 }}>
                    <Typography>
                      Source
                    </Typography>
                    <TextField sx={{ width: 350 }}></TextField>

                    <Typography>
                      Classification
                    </Typography>
                    <TextField sx={{ width: 350 }}></TextField>
                  </AccordionDetails>
                </Accordion>

感谢您的帮助。

我搜索了这个要求，但没有找到任何结果。

【问题讨论】：

标签： material-ui accordion onblur

【解决方案1】：

您可以实现 ClickAwayListener 组件来检测何时在其子元素之外发生点击事件。要获得扩展属性的当前状态，您必须将 onChange 属性添加到您的 Accordion 组件，最后使用 expanded 属性设置其值（真/假）。请查看下面的代码以便更好地理解。此外，还添加了一个工作示例作为链接。

进口：

import ClickAwayListener from '@mui/material/ClickAwayListener';

在你的函数中：

const [open, setOpen] = useState(false);
const handleClickAway = () => {
if(open){
  setOpen(false);
}
};

return (

<ClickAwayListener onClickAway={handleClickAway}>       

    <Accordion expanded={open} onChange={(e,expanded)=>{setOpen(expanded)}}>
      <AccordionSummary
        focusVisibleClassName='focus'
        expandIcon={<ExpandMoreIcon />}
        aria-controls="panel1a-content"
        id="panel1a-header"
      >
        <TextField
          style={{ width: 350 }}
          id="entityName"
          value={entity.entityName}
          onChange={(event) => {
            setEntity({ ...entity, entityName: event.target.value });
          }}
        />
      </AccordionSummary>
      <AccordionDetails sx={{ borderTop: '1px dashed black', width: 400 }}>
        <Typography>
          Source
        </Typography>
        <TextField sx={{ width: 350 }}></TextField>

        <Typography>
          Classification
        </Typography>
        <TextField sx={{ width: 350 }}></TextField>
      </AccordionDetails>
    </Accordion>

</ClickAwayListener>

);

https://codesandbox.io/s/mui-accordion-clickoutside-kmg1eb?file=/demo.js

【讨论】：