选择/打开新下拉列表时自动关闭下拉列表(React)

Question

我有一个下拉菜单组件，我希望能够在您单击其他下拉菜单项时自动关闭上一个下拉菜单。我有下拉组件工作，但在选择新项目后无法关闭它们。此外，如果您单击页面上的任意位置，我想关闭这些项目。任何帮助将不胜感激，提前感谢！

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>
)
``

Answer 1

您需要一个背景 DIV 来允许单击和退出页面上的任何位置。

这就像一个 3 层系统。

• 第一：您的页面内容
• 第二：背景在顶部
• 第三：您的下拉菜单位于背景顶部

一个例子(使用styled-components作为样式，但您可以根据需要设置样式)：

背景.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

下拉列表.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