在与钩子和引导程序反应时，如何在手风琴打开时更改 V 形？

Question

我有一个手风琴，当我点击标题时会打开。我还添加了一个人字形，当它打开时我想改变方向。我不确定如何使用手风琴来做到这一点，因为我不会根据按钮点击来改变状态。我的手风琴代码：

    <Accordion defaultActiveKey="0">
      <Card>
        <Accordion.Toggle as={Card.Header} eventKey="1">
          Roll History <FaChevronDown />
        </Accordion.Toggle>
        <Accordion.Collapse eventKey="1">
          <Card.Body>{historyText}</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion> 

当手风琴打开时，我想改为显示 FaChevronUp？

Answer 1

声明钩子：

  const [open, setOpen] = useState(false);

在这里添加以下内容：

 <Accordion.Toggle as={Card.Header} eventKey="1" onClick={() => setOpen(!open)}>
   Roll History { open ? <FaChevronDown /> : <FaChevronUp/> }
 </Accordion.Toggle>**

有了这个：

onClick={() => setOpen(!open)} 你正在切换钩子状态，这个 onClick 应该放在你点击时打开/关闭元素的元素上。