我有reactJs应用程序，我用一个div创建了一个自定义的dropDown，我设置了一个onClick属性来打开并关闭它。但我也想在用户点击网站的另一个部分时关闭它。
<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>
根据这个答案，我尝试CCD_ 2而不是CCD_；stackoverflow，但我不知道为什么它对我不起作用：(
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
}
}
这可能不是解决问题的确切代码，但你可以使用逻辑
您可以用不同的方式来实现，但我将向您展示我在一个项目中使用的解决方案。
因此，我使用了<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)。值之前的感叹号总是会将其更改为oposite。