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

【问题标题】：How to open different collapse buttons in react-bootstrap?如何在 react-bootstrap 中打开不同的折叠按钮？
【发布时间】：2021-03-17 12:30:29
【问题描述】：

对于一个应用程序，我需要几个折叠按钮。我正在为此使用 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>

【问题讨论】：

标签： javascript reactjs twitter-bootstrap react-bootstrap

【解决方案1】：

现在您对两个按钮使用相同的状态。所以你需要两个有 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}>

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

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

注意安全！

【讨论】：

【解决方案2】：

使用 Accordion 和 useAccordionToggle 钩子，就像在 doc 中一样

【讨论】：

但这不是一个列表。它放置在不同的字段中。