Javascript 属性 - onClick 和 onClickOverThere 用于 dropDown答案

【问题标题】：Javascript attribute - onClick and onClickOverThere for dropDownJavascript 属性 - onClick 和 onClickOverThere 用于 dropDown
【发布时间】：2022-02-03 21:02:51
【问题描述】：

我有 reactJs 应用程序，我制作了一个带有 div 的自定义 dropDown，我设置了一个 onClick 属性来打开 dropDown 并关闭它。但我也想在用户点击网站的另一个部分时关闭它。

 <div
    onClick={() => setNoneQuote(noneQuote ? false : true)}
    className="selected-drop-down"
 >
    <span className="dropDownText">{selectedQuoteCurrency}</span>
    <img
      className="dropDownIcon"
      src={require("../assets/image/arrow/dropDown-Arrow.png")}
      width="15px"
      alt="arrow"
    />
 </div>

我根据这个答案尝试onMouseDown 而不是onClick ==> stackoverflow，但我不知道为什么它对我不起作用:(

【问题讨论】：

标签： javascript reactjs onclick dom-events onmousedown

【解决方案1】：

const dropdownElement= document.querySelector("choose an id or a specific class")
window.onclick = function(event) {
  if (event.target !== dropdownElement) {
    dropdownElement.style.display = "none"; // or any other function that you want to call
  }
}

这可能不是解决问题的确切代码，但您可以使用逻辑

【讨论】：

我做了这个逻辑，但我遇到了一个问题，即当组件 didmount 第一次一切正常并打开 dropDown 并且单击那里时它关闭，但是第二次，下拉菜单没有打开，因为状态不会更改为 true。

【解决方案2】：

你可以用不同的方式来做，但我会向你展示我在我的一个项目中使用的解决方案。

所以，我使用了 <header> 和 <main> 标记，其中包含我的所有组件。在这些标签中，我使用了带有回调函数的 eventListener，如下所示：

<header onClick={handleClick}>
      <Nav />
      <Greeting />
      <Sidebar />
</header>

和

<main onClick={handleClick}>
          <Description />
          <Icons />
          <Prices />
          <Gallery />
          <NecessaryInfo />
          <Location />
          <GalleryModal />
          <ConditionsModal />
        </main>

在回调函数handleClick 中，我检查了用户可以点击的位置，为此我使用了纯 JS 的下一个逻辑：

!e.target.classList.contains("menu-open") &&
  !e.target.classList.contains("menu-links") &&
   !e.target.parentElement.classList.contains("menu-links") &&
  !e.target.parentElement.parentElement.classList.contains("menu-links") &&
  closeSidebar();

函数closeSidebar()很简单：

const closeSidebar = () => {
setIsSidebarOpen(false)};

在您的代码中，您也可以使用：setNoneQuote(!noneQuote)，而不是使用 setNoneQuote(noneQuote ? false : true)。值前的感叹号总是会将其更改为相反的。

【讨论】：