多个下拉菜单不显示选项

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>,
         
        ];

在Return

之下

<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

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

Post 如果可能的话，他们在这里。

多个下拉菜单不显示选项

Multiple dropdowns not showing options

css

reactjs

patternfly