css - 多个下拉菜单不显示选项

Question

我是 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}
      />

Answer 1

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

如果可能的话，把它们贴在这里。