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

Question

我正在使用react-accessible-accordion 一次向用户呈现一个面板的表单。有一个“重置”按钮可以重置用户可能按下的任何按钮的影响。按钮位于面板内。您如何以编程方式折叠任何打开的面板？ AccordionItem 有危险的SetExpanded 选项，但我没有看到任何实际使用的示例或该选项的完整文档（这就是option is described in the 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>
)

Answer 2

我认为您可以将其设为布尔变量并以编程方式对其进行更改。如果它的值未定义，它将使用按钮状态值。

<AccordionItem dangerouslySetExpanded={isExpanded}> 
...
</AccordionItem>

isExpanded 由某处的 setState 变量设置

const [ isExpanded, setIsExpanded ] = setState()

const closeAll = () => {
  setIsExpanded(false)
}