React Material UI 如何在表单提交后关闭Accordion折叠面板？

步骤1：新增控制Accordion展开状态的State #

MUI的Accordion支持受控调用模式，你只需要先在组件内声明一个布尔类型的state来绑定它的展开/折叠状态：

import { useState } from 'react';

// 组件逻辑内声明状态
const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);

如果需要Accordion默认是展开状态，把useState的初始值改为true即可。

步骤2：给Accordion绑定受控属性 #

给Accordion组件添加expanded和onChange属性，将状态和组件关联，既支持用户手动点击切换展开折叠，也支持你通过代码控制状态：

<Accordion 
  elevation={3}
  expanded={isAccordionExpanded}
  onChange={(event, newExpandedState) => setIsAccordionExpanded(newExpandedState)}
>
  <AccordionSummary expandIcon={<ExpandMoreIcon />} aria-controls="panel1a-content" id="panel1a-header">
  </AccordionSummary>
  <AccordionDetails>
    <form onSubmit={onSubmit}>
    </form>
  </AccordionDetails>
</Accordion>

步骤3：在提交成功回调中修改状态触发折叠 #

你只需要在Firebase新增数据成功的.then回调里，把状态设置为false，就能自动折叠Accordion了，修改后的提交逻辑如下：

const onSubmit = e => {
    e.preventDefault();
    firebase
      .firestore()
      .collection("meals")
      .add({
        Name : name,
      })
      .then(() => {
        setName("");
        // 新增这行代码触发折叠
        setIsAccordionExpanded(false);
      });
  };

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