javascript - 在外部单击时关闭弹出窗口

Question

<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;
} 

标签： javascripthtmlcssreactjsfrontend

Answer 1

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

您可以在此处查看 Airbnb 的方法。

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

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

2. 使用withOnClickOutsideHOC 如下：

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};

3. 完毕。