Material Ui Accordion 自动关闭答案

【问题标题】：Material Ui Accordion closes automaticallyMaterial Ui Accordion 自动关闭
【发布时间】：2022-04-11 19:20:57
【问题描述】：

             <Accordion>
              <AccordionSummary
                expandIcon={<ExpandMoreIcon />}
                aria-controls="panel1a-content"
                id="panel1a-header"
              >
                <h6 className="title">Categories</h6>
              </AccordionSummary>
              <AccordionDetails>
                <input onChange={handleCheck} type="checkbox" value="1" />
                <input onChange={handleCheck} type="checkbox" value="1" />
              </AccordionDetails>
            </Accordion>

我已经在材料 ui 手风琴细节面板中放置了输入类型复选框，每当我点击复选框时，手风琴就会自动折叠。

handleCheck 函数：

const handleCheck = (event) => {
      event.stopPropagation();
      const { id, checked } = event.target;

      setSelectedCategories([...selectedCategories, id]);
      if (!checked) {
        setSelectedCategories(selectedCategories.filter((item) => item !== id));
      }
    };

handleChange 函数：

    const handleChange = (panel) => (event, isExpanded) => {
      setExpanded(isExpanded ? panel : false);
    };

【问题讨论】：

标签： reactjs checkbox material-ui nested accordion

【解决方案1】：

我刚刚关注了这个link并参考了evan_schmevan的答案。

我使用下面的代码并将其作为 onClick 函数添加到我的所有输入字段以及 AccordionDetail 标记中，以便在单击其中的任何位置时不会关闭手风琴。希望这会有所帮助！

function onEditClick(e) {
  e.stopPropagation();
}

【讨论】：