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

Question

如何让按钮触发 ant.design 折叠组件以展开其所有选项卡或折叠所有选项卡？我尝试更改 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([]) 以折叠所有按钮。

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

Ant design Collapse - expand / collapse all button

typescript

reactjs

antd

react-hooks