Ant Design Collapse - 关闭按钮 [英] Ant Design Collapse - close on button

问题描述

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

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

<面板标题=新增"><表格/></面板><收起><列表/>

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

有什么办法可以做到吗?

提前致谢.

解决方案

只要维护一个状态说 open 并提供它作为折叠的道具.提交时将其设置为空数组.

工作演示

代码片段

const App = props =>{const [open, setOpen] = useState([1"]);const handleSubmit = e =>{e.preventDefault();setOpen([]);};返回 (<Collapse activeKey={open} onChange={() =>setOpen(prev => [1])}><面板onChange={() =>setOpen(prev => [1])}header =这是面板标题 1"；键=1"><p>{text}</p><form onSubmit={handleSubmit}><button type="submit">Submit</button></表单></面板></收起>);};

I'm a beginner user of Ant Design and I've encountered this problem while using Collapse and Form from Ant Design library.

I've set up my page where the form to add new items is in the collapse and there is a list of items below the Collapse.

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

The item is successfully added to the list outside of the collapse, but the user has to close the collapse by pressing on the panel header. I want the collapse to close automatically when they press the submit button on the form inside Collapse.

Is there any way to make this happen?

Thank you in advance.

解决方案

Just maintain a state say open and provide it as prop to collapse. Set it to empty array upon submit.

working demo

code snippet

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

这篇关于Ant Design Collapse - 关闭按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！