在 react-accessible-accordion 中单击最后一个手风琴项目时关闭它

问题描述

我在 React 中有一个基本的 FAQ 组件。我的问题是当我打开一个手风琴项目时，当我点击它时我无法再次关闭它。我可以关闭手风琴的唯一方法是单击另一个问题。但我也想在我点击问题时关闭它。这是我的代码：

maze[x][y+1]

解决方法

您需要为 allowZeroExpanded 提供一个布尔属性 Accordion。

 <Accordion allowZeroExpanded>
... 
 </Accordion>

它会让你关闭最后一个，否则它会一直保持打开状态。请参阅此official demo。

,

这就是我要做的事情：

const [FAQS,setFAQS] = useState([
    {
      title:"Question 1",answer:`Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
       occaecat ut occaecat consequat est minim minim esse tempor laborum
       consequat esse adipisicing eu reprehenderit enim.`,expanded:false
    },{
      title:"Question 2",answer:`Exercitation in fugiat est ut ad ea cupidatat ut in cupidatat
      occaecat ut occaecat consequat est minim minim esse tempor laborum
      consequat esse adipisicing eu reprehenderit enim..`,expanded:true
    },])


  const setExpand=(index)=>e=>{
     let temp=[...FAQS]
     temp[index].expanded= !temp[index].expanded
     setFAQS(temp)
  }

  return (
    <Accordion allowZeroExpanded={true}  >
        {
          FAQS.map((FAQ,index)=><AccordionItem onClick={setExpand(index)} dangerouslySetExpanded={FAQ.expanded} key={FAQ.title} >
            <AccordionItemHeading>
              <AccordionItemButton  >{FAQ.title}</AccordionItemButton>
            </AccordionItemHeading>
            <AccordionItemPanel>
              <p>
              {FAQ.answer}
              </p>
            </AccordionItemPanel>
          </AccordionItem>)
        }
    </Accordion>
  );