Ant Design Collapse - 关闭按钮

【问题标题】：Ant Design Collapse - close on buttonAnt Design Collapse - 关闭按钮
【发布时间】：2020-07-01 03:53:59
【问题描述】：

我是 Ant Design 的初学者，在使用 Ant Design 库中的 Collapse 和 Form 时遇到了这个问题。

我已经设置了我的页面，其中添加新项目的表单处于折叠状态，并且在折叠下方有一个项目列表。

<Collapse>
  <Panel header="Add New"> 
     <Form />
  </Panel>
<Collapse>
<List/>

项目已成功添加到折叠之外的列表中，但用户必须通过按面板标题来关闭折叠。我希望当他们按下折叠内表单上的提交按钮时折叠自动关闭。

有什么办法可以做到吗？

提前谢谢你。

【问题讨论】：

标签： javascript reactjs web antd

【解决方案1】：

只需维持一个状态，比如open 并将其作为道具提供给崩溃。提交时将其设置为空数组。

working demo

代码 sn-p

const App = props => {
  const [open, setOpen] = useState(["1"]);
  const handleSubmit = e => {
    e.preventDefault();
    setOpen([]);
  };
  return (
    <Collapse activeKey={open} onChange={() => setOpen(prev => [1])}>
      <Panel
        onChange={() => setOpen(prev => [1])}
        header="This is panel header 1"
        key="1"
      >
        <p>{text}</p>
        <form onSubmit={handleSubmit}>
          <button type="submit">Submit</button>
        </form>
      </Panel>
    </Collapse>
  );
};

【讨论】：

很高兴听到这个消息......请考虑接受答案谢谢。
嗨。你能解释一下 const [open, setOpen] = useState(["1"]);在代码中..？有没有其他方法来声明 this 并设置它 = this.props？