Reactjs Reactstrap下拉菜单打开倍数菜单

以下是我的页面快照：

我使用了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>
        );
    }

---

我不知道我的方法有什么问题。有人能帮上忙吗。

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

isOpen={this.state.dropdownOpen}

因此，当布尔值更改时，它将更改所有对象的等参线道具。从而打开/关闭它们。您需要跟踪每个下拉列表的打开状态

---

另外，你不需要让$this=this；在构造函数中，您可以为下拉菜单创建新组件，并管理切换状态，如：

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

}

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

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

---

希望这能解决您的问题：

您可以使用UncontrolledDropdown而不是Dropdown组件

---

谢谢，但是跟踪每个人的打开状态非常困难，因为数据来自数据库，而且项目的数量不会总是相同的，甚至可能是100个数据。那么最简单的方法就是为下拉组件制作一个包装器组件，并让它管理自己的状态。然后您只需编写一次组件，它们就可以管理自己的打开/关闭状态，您不必在父级中跟踪它。