多个不显示选项的下拉列表

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

在render()下

           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

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

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