Question

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

我已经设置好页面，其中用于添加新项目的表单位于折叠中，并且在“折叠”下方有一个项目列表。

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

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

有什么办法可以做到这一点？

谢谢。

Answer 1

只需保持状态open并将其提供为崩溃的支柱即可。提交时将其设置为空数组。

working demo

代码段

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>
  );
};

蚂蚁设计崩溃-按钮关闭

1 个答案: