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

Posted

技术标签:

【中文标题】选择/打开新下拉列表时自动关闭下拉列表(React)【英文标题】:Automatically close dropdown when a new dropdown is selected/opened (React) 【发布时间】:2019-09-06 00:08:37 【问题描述】:

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

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 或 on blur 事件来实现;不过有好处也有坏处! 【参考方案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)设置它来告诉您的组件哪个是openend。

在每个下拉列表中,当您渲染它们时:

...
return(
  <Container
    key=index
    onClick=()=>setIndexDropdownOpened(index)
  />
);

然后,在背景上,你可以这样做:

<Backdrop onClick=()=>setIndexDropdownOpnened(false)/> // So it closes the dropdown

【讨论】:

以上是关于选择/打开新下拉列表时自动关闭下拉列表(React)的主要内容,如果未能解决你的问题,请参考以下文章

下拉列表刷新

Ag-Grid 在与下拉列表交互期间保持自定义过滤器打开

基于其他下拉列表的下拉选择[关闭]

使用填充的下拉列表复制新的 php 表行

在 jQuery 自动完成下拉列表中选择选项时失去焦点

单击关闭时保持 Bootstrap 下拉菜单打开