Question

下面是我的页面快照：

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

这是我使用的代码：

$site_name_with_value

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

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

希望这可以解决您的问题:)

Answer 2

其中每个人都有相同的道具：

isOpen={this.state.dropdownOpen}

因此，当该布尔值更改时，它将更改所有isOpen属性。因此，将它们全部打开/关闭。您需要跟踪每个下拉列表的打开状态。

（而且，您的构造函数中不需要let $this = this;）

Answer 3

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

Reactstrap下拉菜单打开倍数菜单

3 个答案: