React Accordion 组件，在处理程序崩溃后调用 hook

Question

我有一个 React Bootstrap 手风琴组件。在手风琴的每张卡片中，都有一个要完成的任务，然后是一个 'Save' 按钮。此按钮将完成的任务写入数据库。

我还想要保存按钮折叠当前卡片并展开下一张卡片。我可以通过创建一个调用 useAccordionToggle(eventKey) onClick 的客户 Button 组件来实现这一点（在调用 children 之前）：

function AccordianButton({ children, eventKey }) {
    return (
      <Button
        onClick={useAccordionToggle(eventKey)}
      >
        {children}
      </Button>
    );
  }

目前一切顺利！

问题是我只想折叠手风琴卡一旦我确定数据库写入已经成功。

我想不出办法来做到这一点。如果我尝试在处理程序函数中调用 useAccordionToggle，我会收到一个钩子错误，因为我在组件之外。有办法吗？

Answer 1

我意识到您可以使用 activeKey 参数并使用来自 React 组件的状态来驱动它，从而从任何地方进行控制。比使用 eventKey 参数容易得多。

React Accordion 组件，在处理程序崩溃后调用 hook

React Accordion component, calling hook after handler from within collapse

accordion

reactjs

react-bootstrap

react-hooks