我有一个下拉组件,我希望能够在您单击不同的下拉菜单项时自动关闭上一个下拉菜单。我有下拉组件工作,但我无法在选择新项目后关闭它们。此外,如果您单击页面上的任意位置,我想关闭这些项目。任何帮助将不胜感激,提前致谢!
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 以允许在页面上的任意位置单击和退出。
这就像一个三层系统。
- 第一:你的页面内容
- 第二:背景放在最上面
- 第三:您的下拉菜单位于背景之上
一个示例(使用 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
关于javascript - 选择/打开新下拉菜单时自动关闭下拉菜单( react ),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55698845/