如何控制 Chakra UI 手风琴项扩展？答案

【问题标题】：How to control Charka UI accordion item expansion?如何控制 Chakra UI 手风琴项扩展？
【发布时间】：2022-10-19 15:41:32
【问题描述】：

在Chakra docs 他们提供了一个例子，但我无法让它工作。

我想控制第二个手风琴项的扩展，索引 1。我可以使用isDisabled prop 控制它的禁用状态，如下所示：

const [disableNd, setDisableNd] = useState(false);

<Button onClick={() => setDisableNd(!disableNd)}>
    Expand 2nd
 </Button>
 
<Accordion allowToggle>
  //..
  <AccordionItem isDisabled={disableNd}>
    //...
  </AccordionItem>
</Accordion>

但是，当我对isExpanded prop 执行相同操作或使用他们在文档中提供的示例时，我无法使其正常工作。我该如何正确地做到这一点？

【问题讨论】：

标签： reactjs chakra-ui

【解决方案1】：

根据Accordion page from Chakra UI docs：

如果您需要访问每个手风琴项的内部状态，您可以使用渲染道具。它提供了 2 个内部状态道具：isExpanded 和 isDisabled。

这意味着 isExpanded 属性仅对获取手风琴项的状态有用。

为了扩展一项或多项，您必须在 Accordion 组件上使用 index 属性：
index: 展开的手风琴项的索引
const [accordionIndex, setAccordionIndex] = useState(-1);

<Button onClick={() => setAccordionIndex(1)}>
  Expand 2nd
</Button>
 
<Accordion allowToggle index={accordionIndex}>
  //..
  <AccordionItem>
    //...
  </AccordionItem>
</Accordion>

【讨论】：