以编程方式折叠所有反应可访问的折叠面板

Question

我正在使用react-accessible-accordion一次向用户呈现一个表单面板。有一个“重置”按钮，可以重置用户可能按下的任何按钮的影响。按钮位于面板内部。如何以编程方式折叠任何打开的面板？AccordionItem 有危险的SetExpanded 选项，但我没有看到任何使用此选项的实际示例或该选项的完整文档（这是docs 中描述该选项的地方）。我是否必须在此处使用状态变量才能使每个项目的展开折叠状态能够以编程方式对其进行操作？这是我现在拥有的代码的简化版本：

import React from 'react';
import ToggleButton from "react-bootstrap/ToggleButton";
import ButtonGroup from "react-bootstrap/ButtonGroup";
import 'bootstrap/dist/css/bootstrap.min.css';
import {Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel} from 'react-accessible-accordion';


export const AccordionComponent = props => {
  stateHooks = [React.useState(-1), React.useState(-1)]
  const [ [varA, setVarA], [varB, setVarB] ] = stateHooks
  
  const handleResetAccordion = e => {
    e.preventDefault();
    stateHooks.forEach(hook => {  // pass -1 to each setter
      hook[1]('-1');  // index 1 contains the setter
    })
  }

  return (
    <div className="accordion_container">
      <Accordion allowZeroExpanded={true}>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton> Panel #1 Title </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div className='radioQuestionCard'>
              <h3>Question #1 Prompt:</h3>
              <ButtonGroup className='radio' toggle id='q1'>
                <ToggleButton key='0' type="radio" name="q1" value='0' checked={varA === '0'}
                  onChange={e => setVarA(e.currentTarget.value)} > Q1: Option1
                </ToggleButton>
                <ToggleButton key='1' type="radio" name="q1" value='1' checked={varA === '1'}
                  onChange={e => setVarA(e.currentTarget.value)} > Q1: Option2
                </ToggleButton>
              </ButtonGroup>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
        <AccordionItem>
          <AccordionItemHeading>
            <AccordionItemButton> Panel #2 Title </AccordionItemButton>
          </AccordionItemHeading>
          <AccordionItemPanel>
            <div className='radioQuestionCard'>
              <h3>Question #2 Prompt:</h3>
              <ButtonGroup className='radio' toggle id='q2'>
                <ToggleButton key='0' type="radio" name="q2" value='0' checked={varB === '0'}
                  onChange={e => setVarB(e.currentTarget.value)} > Q2: Option1
                </ToggleButton>
                <ToggleButton key='1' type="radio" name="q2" value='1' checked={varB === '1'}
                  onChange={e => setVarB(e.currentTarget.value)} > Q2: Option2
                </ToggleButton>
              </ButtonGroup>
            </div>
          </AccordionItemPanel>
        </AccordionItem>
      </Accordion>
      <button className='btn btn-danger btn-sm'
        onClick={handleResetAccordion} id='resetAccordion'> Reset
      </button>
    </div>
  )
}

Answer 1

React-accessible-accordion 故意忽略了以编程方式控制折叠面板展开状态的能力，因此我发现的解决方法是将整个折叠面板放入 div 中，并为该 div 提供一个关键参数。当键改变时，手风琴将被强制重新初始化。

let accordion_key = 12345;

const handleReinitialize = () => accordion_key++;

return(
  <div className="accordion_container" key={accordion_key}>
    <Accordion>
      <AccordionItem>
        <AccordionItemHeading>
        ... etc.
    <button onClick={handleReinitialize} id='reinitialize'>Reinitialize Accordion</button>
  </div>
)