如何在 react-bootstrap 中打开不同的折叠按钮？

Question

对于一个应用程序，我需要几个折叠按钮。 我正在为此使用 React-Bootstrap。

但是当我单击其中一个按钮时，所有按钮都会打开。 我试图改变他们的身份证，但没有奏效。 我想要的只是我点击的按钮会打开。

function ... {
const [open, setOpen] = useState(false);
...
return(
...

这是按钮 1

<Button
                                        onClick={() => setOpen(!open)}
                                        aria-controls="example-collapse-text"
                                        aria-expanded={open}
                                    >
                                        Satış Artışı
                                    </Button>
                                    <Collapse in={open}>
                                        <div id="example-collapse-text">
                                        <tr>
                                        <FilterGroup name="Yıllık Satış Artışı">
                                            <tr><FilterButton val1="0" val2="0.1"> %10'a Kadar Olanlar</FilterButton></tr>
                                            <tr><FilterButton val1="0.1" val2="0.3">%10-%30 Arası Olanlar</FilterButton></tr>
                                            <tr><FilterButton val1="0.3" val2=""> %30'dan Büyük Olanlar</FilterButton></tr>
                                        </FilterGroup>
                                    </tr>
                                        </div>
                                    </Collapse>

这是按钮 2

<Button
                                        onClick={() => setOpen(!open)}
                                        aria-controls="example-collapse-text_1"
                                        aria-expanded={open}
                                    >
                                        Satış Artışı
                                    </Button>

                                    <Collapse in={open}>
                                        <div id="example-collapse-text_1">
                                            <tr>
                                                <FilterGroup name="Çeyreklik Satış Artışı">
                                                    <tr><FilterButton val1="0" val2="0.1"> %10'a Kadar Olanlar</FilterButton></tr>
                                                    <tr><FilterButton val1="0.1" val2="0.3">%10-%30 Arası Olanlar</FilterButton></tr>
                                                    <tr><FilterButton val1="0.3" val2="">%30'dan Büyük Olanlar</FilterButton></tr>
                                                </FilterGroup>
                                            </tr>
                                    </div>
                                    </Collapse>

Answer 1

像在文档中一样使用Accordion和useAccordionToggle hook

Answer 2

现在，您对两个按钮使用相同的 state。 所以你需要两个有 2 个 state 但这不是好的解决方案

const [open, setOpen] = useState({
   button1: false, 
   button2: false
});

...

// button 1
<button onClick={() => setOpen({...open, button1: !open.button1)}>
<Collapse in={open.button1}>

// button 2
<button onClick={() => setOpen({...open, button2: !open.button2)}>
<Collapse in={open.button2}>

但这也不是很好的解决方案

我不确定手风琴是否需要成为一个列表但我相信你可以用手风琴做你想做的事

注意安全！