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

Question

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

但是当我单击其中一个按钮时，所有按钮都会打开。我试图更改他们的 ID，但没有成功。我想要的只是我点击的按钮会打开。

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

像 doc

一样使用 Accordion 和 useAccordionToggle 挂钩

Answer 2

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

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}>

但这也确实不是好的解决方案

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

注意安全！

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

How to open different collapse buttons in react-bootstrap?

javascript

twitter-bootstrap

reactjs

react-bootstrap