react+antd的Collapse如何点击按钮折叠所有

在React中结合Ant Design库（antd）实现点击按钮折叠所有` Collapse `组件，你需要在处理按钮点击事件的地方操作所有展开的` Collapse.Panel `。首先，确保你已经安装了antd库并引入了相关的组件：

import React from 'react';
import { Button, Collapse } from 'antd';

const { Panel, Button as AntdButton } = Collapse;

然后，在你的组件里，你可以创建一个状态变量来跟踪当前是否应该折叠所有的面板，并在点击按钮时更新这个状态：

import { useState } from 'react';

function MyComponent() {
  const [isCollapsed, setIsCollapsed] = useState(true); // 初始设置为true，表示默认折叠

  const toggleCollapseAll = () => {
    setIsCollapsed(!isCollapsed);
    // 如果你想让每个Panel都单独响应，可以遍历Panels并手动设置collapsed属性
    // const panels = document.querySelectorAll('.ant-collapse-item');
    // panels.forEach(panel => panel.collapse(isCollapsed));
  };

  return (
    <div>
      {/* ...其他内容 */}
      <Button onClick={toggleCollapseAll} type="primary">
        折叠/展开所有
      </Button>
      <Collapse
        accordion // 使用accordion模式，保证一次只能打开一个面板
        defaultActiveKey={['0']} // 设置默认显示第一个面板
        onChange={(keys) => console.log('active key changed to', keys)}
      >
        <Panel header="面板1" key="0">这是面板1的内容</Panel>
        <Panel header="面板2" key="1">这是面板2的内容</Panel>
        {/* 更多面板... */}
      </Collapse>
    </div>
  );
}

当你点击“折叠/展开所有”按钮时，`isCollapsed`状态会切换，所有`Collapse.Panel`都将相应地折叠或展开。