我有一个下拉组件,我希望能够在您单击其他下拉菜单项时自动关闭上一个下拉列表。我有下拉组件工作但我无法在选择新项目后关闭它们。此外,如果您点击页面上的任何位置,我想关闭项目。任何帮助将不胜感激,提前感谢!
export const Dropdown: FC<Props> = ({ passedBindings }) => {
let [isDropdownOpen, setDropdownOpen] = useState(false);
const [ firstMediaBindings, ...restMediaBindings ] = bindings.mediaFlagBindings||[{}];
const toggleDropdown = () => {
setDropdownOpen(!isDropdownOpen)
};
return (
<div { ...optionalAttributes }>
<Container>
{
firstMoleculeMediaFlag()
}
{isDropdownOpen && restMediaBindings.length > 0 &&
<Container passedBindings={({
padding: {
direction: "all",
size: "size2"
}
})}>
{
restMediaBindings.map((mediaFlagBindings: IMoleculeMediaFlag, index: number) => {
return (
<Container
key={index}
passedBindings={({
padding: {
direction: "all",
size: "size1"
}
})}>
<MediaFlag key={index} passedBindings={mediaFlagBindings} />
</Container>
)
})
}
</Container>
}
</Container>
</Container>
</div>
)
``
您需要背景DIV才能允许单击并退出页面上的任何位置。
它就像一个3层系统。
一个例子(使用styled-components
作为样式,但你可以根据自己的意愿设置样式):
Backdrop.js
这会在页面内容之上呈现div。
const Backdrop = styled.div`
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.2);
z-index: 100;
`;
像这样使用它:有条件地使用isDropdownOpen
Dropdown.js
但是请记住使用z-index
来设置你的下拉列表,其高度比你在背景中使用的z-index
更高。在这个例子中,我使用100作为背景,所以你可以使用200。
export const Dropdown() {
...
return(
isDropdownOpen ?
<Backdrop onClick={toggleDropdown}/>
// Here goes the rest of your return for your dropdown
);
}
如果你需要一个下拉菜单来点击它们,你需要在state
中告诉你哪一个是打开的。
就像是:
const [indexDropdownOpened, setIndexDropdownOpened] = useState(false);
当没有打开下拉列表时,您可以将其设置为false
(初始值),并且您可以使用index
(或key
)设置它以告诉您的组件哪个是开放的。
在每个下拉列表中,当您渲染它们时:
...
return(
<Container
key={index}
onClick={()=>setIndexDropdownOpened(index)}
/>
);
然后,在背景幕上,你可以这样做:
<Backdrop onClick={()=>setIndexDropdownOpnened(false)}/> // So it closes the dropdown