单击外部时关闭弹出窗口

Posted 2023-03-05

【中文标题】单击外部时关闭弹出窗口

【英文标题】：Close the pop-up when clicking outside it

【发布时间】：2021-11-21 08:39:21

【问题描述】：

<div className="topnav">
                    <div className="search-container">
                      <ul style= marginLeft: "2px" >
                        <form className="main-form" autocomplete="off">
                          <label for="main-search"></label>
                          <input
                            type="text"
                            name="searchData"
                            className="input-text input-text--border-radius input-text--style-1"
                            onKeyPress=this.keyPress
                            autocomplete="off"
                          />
                          this.state.showSearchLoader === false ? (
                            <button className="btn--icon fas fa-search main-search-button"></button>
                          ) : (
                            <div class="spinner-border main-search-button-loader-dash btn--icon"></div>
                          )
                          this.state.searchData.length != 0 && (
                            <Suggetion
                              searchedData=this.state.searchData                             
                            />
                          )
                        </form>
                      </ul>
                    </div>
                  </div>

这是我为搜索功能编写的 html 代码。问题是当我在屏幕上的任意位置单击外部时，我想关闭建议组件。

        <ul className="options">
          Array.isArray(props.searchedData) &&
            props.searchedData.map((item, index) => 
              return (
                <a key=index href=`/product/$_get(item, "sku")`>
                  <div
                    className="row"
                    style=
                      border: "1px solid #eaeaea",
                      marginRight: "0px",
                      marginLeft: "0px",
                      padding: "6px",
                    
                  >
                    <div className="col-md-3">
                      <img
                        className="img-responsive"
                        src=item.images[0]
                        style= width: 60, height: 60 
                      />
                    </div>
                    <div className="col-md-7" style= paddingTop: "10px" >
                      <a
                        href=`/product/$_get(item, "sku")`
                        title=item.name
                        style= fontSize: "14px" 
                      >
                        item.name
                      </a>
                    </div>
                    <div className="col-md-2" style= paddingTop: "10px" >
                      <a
                        href=`/product/$_get(item, "sku")`
                        title=item.name
                        style= fontSize: "14px" 
                      >
                        &#8377;item.price
                      </a>
                    </div>
                  </div>
                </a>
              );
            )
        </ul>
      </div>
    );
  

上面是建议组件。流程是当我在搜索结果中输入任何内容时，它会显示建议组件。但是当我单击屏幕上除该组件之外的任何位置时，它应该关闭。谁能帮帮我..

下面是我用过的css：

.topnav 
  overflow: hidden;
  background-color: none;
  margin-left: -210px;


.topnav .search-container 
  float: right;


.topnav input[type="text"] 
  padding: 9px 40px;
  margin-top: 8px;
  margin-left: -12px;
  font-size: 16px;
  border: 1px solid;
  border-radius: 20px;


.topnav .search-container button 
  font-size: 16px;
  border: none;
  cursor: pointer;


.main-form 
  position: relative;
  width: 90%;
  padding: 12px;


.main-search-button 
  position: absolute;
  top: 55%;
  left: 230px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 18px;
  color: black;

.search_bar 
  border-radius: 0 0 2px 2px;
  transition: all 0.3s ease;
  position: fixed;
  left: 150px;
  background-color: #fff;
  color: #000;
  top: 50px;
  z-index: 9;
  box-shadow: 2px 3px 5px -1px rgb(0 0 0 / 50%);
  overflow: hidden;
  display: block;
  max-height: 350px;
  width: 460px;
  overflow-y: auto;
  scrollbar-color: red;
 

【问题讨论】：

你用代码淹没了这个问题，至少尝试添加一些消息。

创建问题的实时版本。

您可以使用ref 来完成。示例codesandbox.io/s/friendly-hofstadter-qtrtn?file=/src/…

这有什么更新吗？

【参考方案1】：

为此创建一个好的实现并不是那么简单，并且已经有一些不言自明的解决方案，所以在这里重新复制它们是不值得的。

你可以看到Airbnb的做法here。

我们有自己的实现，它基于上一个实现，但有一些改进（你可以看到它here）。要使用它，请按照以下说明操作：

npm install @codistica/react 或 yarn add @codistica/react（库是高度可摇树的）。

如下使用withOnClickOutside HOC：

import React from 'react';
import withOnClickOutside from '@codistica/react';

const PopUp = withOnClickOutside('div');

function MyComponent() 
  return (
    <PopUp onClickOutside=() => alert('Close the Pop-Up!'); />
  );


export MyComponent;

完成。