如何解决在 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>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。