选择/打开新下拉列表时自动关闭下拉菜单( new )
选择/打开新下拉列表时自动关闭下拉菜单( new )
提问于 2019-04-16 00:12:48
我有一个下拉组件，当您单击另一个下拉菜单项时，我希望能够自动关闭前面的下拉菜单。我有下拉组件工作，但我不能让他们关闭后，选择一个新的项目。此外，如果您单击页面上的任何位置，我希望关闭这些项目。任何帮助都将不胜感激，谢谢！
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>
)
``Stack Overflow用户
发布于 2019-04-16 07:03:55
您需要一个背景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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55698845
复制相关文章
相似问题
腾讯云开发者
