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