如何点击「Huỷ」按钮实现Collapse.Panel内容折叠？

要实现点击「Huỷ」（取消）按钮时折叠当前的Collapse.Panel，核心是通过Ant Design Collapse组件的activeKey属性控制面板的展开/折叠状态，具体实现如下：

实现步骤与代码示例 #

1. 维护Collapse的展开状态 #

在包含Collapse的父组件中，通过React状态管理当前展开的面板key数组，点击按钮时更新该状态以触发面板折叠：

import { useState } from 'react';
import { Collapse, Form, Input, Button, Row, Col } from 'antd';

const UserSettings = () => {
  // 初始化展开状态，默认展开username面板
  const [activePanels, setActivePanels] = useState(['username']);

  // 取消按钮点击逻辑：移除当前面板的key，实现折叠
  const handleCancel = () => {
    setActivePanels(prevKeys => prevKeys.filter(key => key !== 'username'));
  };

  const onFinishUsername = (values) => {
    console.log('表单提交内容:', values);
    // 提交完成后也可触发折叠
    handleCancel();
  };

  const onFinishFailed = (errorInfo) => {
    console.log('表单提交失败:', errorInfo);
  };

  return (
    <Collapse activeKey={activePanels}>
      <Collapse.Panel header="Username" key="username">
        <Form
          labelAlign="right"
          labelCol={{ offset: 6 }}
          onFinish={onFinishUsername}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true }, { warningOnly: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 6 }}>
            <Row justify="end">
              <Col pull={1}>
                <Button type="primary" htmlType="submit">
                  Lưu
                </Button>
              </Col>
              <Col>
                {/* 绑定取消点击事件 */}
                <Button onClick={handleCancel}>Huỷ</Button>
              </Col>
            </Row>
          </Form.Item>
        </Form>
      </Collapse.Panel>
      {/* 其他面板可按相同逻辑扩展 */}
    </Collapse>
  );
};

export default UserSettings;

2. 类组件版本（若使用类组件） #

如果是基于类组件开发，逻辑一致，仅状态管理方式调整：

import React from 'react';
import { Collapse, Form, Input, Button, Row, Col } from 'antd';

class UserSettings extends React.Component {
  state = {
    activePanels: ['username'],
  };

  handleCancel = () => {
    this.setState(prevState => ({
      activePanels: prevState.activePanels.filter(key => key !== 'username'),
    }));
  };

  onFinishUsername = (values) => {
    console.log('表单提交内容:', values);
    this.handleCancel();
  };

  onFinishFailed = (errorInfo) => {
    console.log('表单提交失败:', errorInfo);
  };

  render() {
    return (
      <Collapse activeKey={this.state.activePanels}>
        <Collapse.Panel header="Username" key="username">
          <Form
            labelAlign="right"
            labelCol={{ offset: 6 }}
            onFinish={this.onFinishUsername}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item
              label="Username"
              name="username"
              rules={[{ required: true }, { warningOnly: true }]}
            >
              <Input />
            </Form.Item>
            <Form.Item wrapperCol={{ offset: 6 }}>
              <Row justify="end">
                <Col pull={1}>
                  <Button type="primary" htmlType="submit">
                    Lưu
                  </Button>
                </Col>
                <Col>
                  <Button onClick={this.handleCancel}>Huỷ</Button>
                </Col>
              </Row>
            </Form.Item>
          </Form>
        </Collapse.Panel>
      </Collapse>
    );
  }
}

export default UserSettings;

核心逻辑说明 #

• activeKey：Collapse组件的核心控制属性，通过字符串数组指定当前展开的面板key。
• handleCancel函数：点击「Huỷ」按钮时，过滤掉当前面板的key（username），更新状态后Collapse会自动折叠对应面板。

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