Antd折叠面板点击时切换Header文本的实现求助

要实现点击折叠面板Header时切换文本，核心是通过React状态跟踪面板的展开/收起状态，结合Collapse组件的onChange事件动态更新标题文本，具体实现如下：

完整代码示例 #

import { useState } from 'react';
import { Collapse } from 'antd';

const { Panel } = Collapse;

const YourComponent = () => {
  // 跟踪面板是否展开，初始为收起状态
  const [isPanelOpen, setIsPanelOpen] = useState(false);

  // 处理面板展开/收起事件
  const handleCollapseChange = (keys) => {
    // keys为空数组表示面板收起，有值则表示展开
    setIsPanelOpen(keys.length > 0);
  };

  return (
    <Collapse
      bordered={false}
      className="shadow p-2 mb-5 bg-white rounded"
      style={{ marginTop: 16, width: '100%', background: 'white' }}
      activeKey={isPanelOpen ? ['panel1'] : []}
      onChange={handleCollapseChange}
    >
      <Panel 
        header={isPanelOpen ? 'Hide Details' : 'Show Details'} 
        key="panel1"
      >
        <table border={0} cellPadding={5} cellSpacing={10}>
          <tr>
            <th className="table-header">Lead Information</th>
          </tr>
          <tr>
            <td>Lead Owner</td>
            <td>
              <input className="inputField-2" type="text" />
            </td>
            <td>Company</td>
            <td>
              <input className="inputField-2" type="text" />
            </td>
          </tr>
          <tr>
            <td>Twitter</td>
            <td>
              <input className="inputField-2" type="text" />
            </td>
          </tr>
        </table>
        <br />
      </Panel>
    </Collapse>
  );
};

export default YourComponent;

关键说明 #

• 使用useState定义isPanelOpen状态，初始值为false（对应初始收起状态，显示"Show Details"）。
• Collapse组件通过activeKey控制面板的展开/收起状态，onChange事件触发时更新isPanelOpen。
• Panel的header属性根据isPanelOpen的值动态切换文本：展开时显示"Hide Details"，收起时显示"Show Details"。
• 修正了你原代码中className属性未闭合引号的语法错误。

内容的提问来源于stack exchange，提问作者Rasha Hasoon