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作为样式，但是您可以根据需要设置样式）：

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

选择/打开新下拉菜单时自动关闭下拉菜单（反应）

1 个答案: