在 Bootstrap 中扩展 Accordion 时无法更改我的反应图标

Question

在 Bootstrap 中展开 Accordion 时，我无法更改我的反应图标。 “点击我”内容正在下拉并正确显示，但图标仍然卡住。

 function Expander () {

  const[active,setActive] = useState(false);


  return (
    <Accordion defaultActiveKey="0">
  <Card>
    <Accordion.Toggle as={Card.Header} eventKey="0">
      {active ? <GrAddCircle size='20px'/> : <AiOutlineMinusCircle size='20px'/>}
      Click me!
    </Accordion.Toggle>
    <Accordion.Collapse eventKey="0" onClick={()=>setActive(!active)}>
      <Card.Body>Hello! I'm the body</Card.Body>
    </Accordion.Collapse>
  </Card>
  <Card>
    <Accordion.Toggle as={Card.Header} eventKey="1">
      Click me!
    </Accordion.Toggle>
    <Accordion.Collapse eventKey="1">
      <Card.Body>Hello! I'm another body</Card.Body>
    </Accordion.Collapse>
  </Card>
</Accordion>
  );
}

export default Expander;

Answer 1

似乎setActive 方法永远不会被调用，这导致活动标志永远不会变成true。

为什么要在Accordion.Collapse 元素上添加onClick 侦听器，它应该在Accordion.Toggle 元素上。