多个下拉菜单不显示选项答案

【问题标题】：Multiple dropdowns not showing options多个下拉菜单不显示选项
【发布时间】：2021-07-07 05:59:15
【问题描述】：

我是 React 的初学者。我正在使用Patternfly Dropdown。我面临的问题是当我尝试使用两个以上相同的下拉菜单时。然后，当我点击它们时，里面的选项没有打开。

我想知道如何通过修改现有代码在同一页面中拥有多个下拉菜单。

状态：

 //dropdown menu
      this.onToggle = isOpen => {
        this.setState({
          isOpen
        });
      };
      this.onSelect = event => {
        this.setState({
          isOpen: !this.state.isOpen
        });
        this.onFocus();
      };
      this.onFocus = () => {
        const element = document.getElementById('toggle-id-1');
        element.focus();
      };

在渲染（）下

           const dropdownItems = [
       
          <DropdownItem key="action1" component="button" >
            1 Hour
          </DropdownItem>,
           <DropdownItem key="action2" component="button">
           1 Day
         </DropdownItem>,
           <DropdownItem key="action3" component="button">
           1 Week
         </DropdownItem>,
        <DropdownItem key="action4" component="button">
            Never
          </DropdownItem>,
         
        ];

归来

<Dropdown
           onSelect={this.onSelect}
           toggle={
          <DropdownToggle id="toggle-id-1" onToggle={this.onToggle}>
            Dropdown
          </DropdownToggle>
        }
        isOpen={isOpen}
        dropdownItems={dropdownItems}
        autoFocus={false}
      />

 <Dropdown
           onSelect={this.onSelect}
           toggle={
          <DropdownToggle id="toggle-id-2" onToggle={this.onToggle}>
            Dropdown
          </DropdownToggle>
        }
        isOpen={isOpen}
        dropdownItems={dropdownItems}
        autoFocus={false}
      />

【问题讨论】：

标签： css reactjs patternfly

【解决方案1】：

您对两个下拉菜单使用相同的状态变量。当您单击下拉菜单时，打开您的控制台并检查错误。

如果可能，请在此处发布。

【讨论】：