所有面板都处于非活动状态

Question

当我更改“activeKey”时，所有面板都变为非活动状态。为什么？

import React, {useEffect, useState} from "react";
import { Collapse } from 'antd';

const { Panel } = Collapse;

const text = `
  A dog is a type of domesticated animal.
  Known for its loyalty and faithfulness,
  it can be found as a welcome guest in many households across the world.
`;

export default function Abc() {

    setTimeout(() => {
        setOpenKey(["2"])
    }, 3000)

    const [openKey, setOpenKey] = useState(["1"])

    return (
        <div>
            <Collapse accordion activeKey={openKey} >
                <Panel header="This is panel header 1" key="1">
                    <p>{text}</p>
                </Panel>
                <Panel header="This is panel header 2" key="2">
                    <p>{text}</p>
                </Panel>
                <Panel header="This is panel header 3" key="3">
                    <p>{text}</p>
                </Panel>
            </Collapse>
        </div>
    )
}

我的目标是在打开或关闭面板时通过“useState”挂钩进行驱动。

Answer 1

当您使用activeKey时，表示该组件是受控组件。您应该更改 onChange 处理程序中的 activeKey 以激活其他面板。

你可以这样做

const [openKey, setOpenKey] = useState(["1"])
const callback = (key) => {
  setOpenKey([key])
}

return (
  <div>
    <Collapse accordion activeKey={openKey} onChange={callback} >
      <Panel header="This is panel header 1" key="1">
        <p>{text}</p>
      </Panel>
      <Panel header="This is panel header 2" key="2">
        <p>{text}</p>
      </Panel>
      <Panel header="This is panel header 3" key="3">
        <p>{text}</p>
      </Panel>
    </Collapse>
  </div>
)

所有面板都处于非活动状态

All panels go inactive

accordion

antd