reactjs - Ant design Collapse - 展开/折叠所有按钮

Question

如何让按钮触发 ant.design Collapse 组件以展开其所有选项卡或折叠所有选项卡？我尝试更改 defaultActiveKey 但我得到的印象是只有在呈现页面时才能更改？如果没有，有人可以提供折叠多个面板的按钮的简短片段吗？我拥有的面板数量已设置。

Answer 1

您应该在受控模式下使用组件，即您应该提供打开的面板的值。为此，您应该使用activeKey道具。这是示例：

let App = () => {
  let [openPanels, setOpenPanels] = React.useState([]);
  return (
    <Collapse activeKey={openPanels} onChange={setOpenPanels}>
      <Panel header="This is panel header 1" key="1">
        <p>test1</p>
      </Panel>
      <Panel header="This is panel header 2" key="2">
        <p>test2</p>
      </Panel>
      <Panel header="This is panel header 3" key="3">
        <p>test3</p>
      </Panel>
    </Collapse>
  );
};

现在您可以轻松地添加一个按钮并单击设置setOpenPanels([])以折叠所有按钮。