Reactstrap 下拉菜单打开倍数菜单

Posted 2023-03-23

【中文标题】Reactstrap 下拉菜单打开倍数菜单

【英文标题】：Reactstrap dropdown opening multiples menu

【发布时间】：2019-03-11 15:54:08

【问题描述】：

下面是我的页面截图：

我使用 reactstrap 下拉菜单将按钮与菜单绑定。每当我单击一个按钮时，所有下拉菜单都会打开。下面的快照是下拉问题：

这是我使用的代码：

 import React,  Component  from 'react';
    import './Home.css';
    import  Dropdown, DropdownToggle, DropdownMenu, DropdownItem  from 'reactstrap';

    export class Home extends Component 
        constructor(props) 
            super(props);
            let $this = this;
            $this.toggle = $this.toggle.bind($this);
            $this.state =
                
                    dropdownOpen: false
                ;
        
        toggle() 
            this.setState(prevState => (
                dropdownOpen: !prevState.dropdownOpen
            ));
        
    render() 
        return (
            <div className="table-div table-responsive-xl">
                <table className="table table-hover">
                    <thead>
                        <tr>
                            <th scope="col" />
                            <th scope="col">Authentication</th>
                        </tr>
                    </thead>
                    <tbody>
                        this.state.slackmembers.map((item, key) => 
                            return (
                                <tr key=key>
                                    <td scope="row" />

                                    <td>item.Authentication</td>
                                    <td>
                                        <Dropdown isOpen=this.state.dropdownOpen toggle=this.toggle>
                                            <DropdownToggle className="menu-button">
                                                <i className="fa fa-ellipsis-h" aria-hidden="true" type="ellipsis" />
                                            </DropdownToggle>
                                            <DropdownMenu>
                                                <DropdownItem style= fontWeight: 500, color: 'black' >First</DropdownItem>
                                                <DropdownItem style= fontWeight: 500, color: 'black' >Second</DropdownItem>
                                                <DropdownItem divider />
                                                <DropdownItem style= fontWeight: 500, color: 'red' >Last </DropdownItem>
                                            </DropdownMenu>
                                        </Dropdown>
                                    </td>
                                </tr>
                            );
                        )                     
                    </tbody>
                </table>
            </div>
        );
    

我不知道我的方法有什么问题。有人可以帮忙解决这个问题吗？

【参考方案1】：

您可以为 Dropdown 创建一个新组件并管理切换状态，例如：

default class TempDropdown extends React 

constructor(props)
    super(props);

    this.state = 
        isOpen: false
    


toggle = () => 
    this.setState(isOpen: !this.state.isOpen)


render()
    return(
        <Dropdown isOpen=this.state.isOpen toggle=this.toggle>
            <DropdownToggle className="menu-button">
                <i className="fa fa-ellipsis-h" aria-hidden="true" type="ellipsis" />
            </DropdownToggle>
            <DropdownMenu>
                <DropdownItem style= fontWeight: 500, color: 'black' >First</DropdownItem>
                <DropdownItem style= fontWeight: 500, color: 'black' >Second</DropdownItem>
                <DropdownItem divider />
                <DropdownItem style= fontWeight: 500, color: 'red' >Last </DropdownItem>
            </DropdownMenu>
        </Dropdown>
    )

然后在您的 Home 组件中使用它并将数据作为道具（如果有）传递，例如：

render() 
    return (
        <div className="table-div table-responsive-xl">
            <table className="table table-hover">
                <thead>
                    <tr>
                        <th scope="col" />
                        <th scope="col">Authentication</th>
                    </tr>
                </thead>
                <tbody>
                    this.state.slackmembers.map((item, key) => 
                        return (
                            <tr key=key>
                                <td scope="row" />

                                <td>item.Authentication</td>
                                <td>
                                    <TempDropDown />
                                </td>
                            </tr>
                        );
                    )                     
                </tbody>
            </table>
        </div>
    );

希望这能解决你的问题:)

【参考方案2】：

他们每个人都有相同的道具：

isOpen=this.state.dropdownOpen

因此，当该布尔值更改时，它将更改所有这些的 isOpen 属性。从而打开/关闭它们。您需要跟踪每个下拉菜单的打开状态。

（另外，你的构造函数中不需要let $this = this;）

【讨论】：

谢谢，但是跟踪每个人的打开状态非常困难，因为数据来自数据库，并且项目的数量并不总是相同，它们甚至可能是 100 多个数据。

那么最简单的方法是为下拉组件创建一个包装器组件并让它管理自己的状态。然后您只需编写一次组件，它们将管理自己的打开/关闭状态，您不必在父级中跟踪它。

【参考方案3】：

你可以只使用 UncontrolledDropdown 而不是 Dropdown 组件 https://reactstrap.github.io/components/dropdowns/