如何在 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}>

但這也不是很好的解決方案

我不確定手風琴是否需要成為一個列表但我相信你可以用手風琴做你想做的事

注意安全！