我正在寻找一种方法来检测单击事件是否发生在组件之外，如本文所述。jQuery Nearest() 用于查看来自单击事件的目标是否将 dom 元素作为其父元素之一。如果有匹配项，则单击事件属于其中一个子项，因此不会被视为在组件之外。
所以在我的组件中，我想将一个点击处理程序附加到窗口。当处理程序触发时，我需要将目标与组件的 dom 子项进行比较。
click 事件包含诸如“path”之类的属性，它似乎保存了事件经过的 dom 路径。我不确定要比较什么或如何最好地遍历它，我想一定有人已经把它放在一个聪明的实用函数中......不是吗？
React 16.3+ 中的 Refs 用法发生了变化。
以下解决方案使用 ES6 并遵循绑定和通过方法设置 ref 的最佳实践。
要查看它的实际效果：
类实现：
import React, { Component } from 'react';
import PropTypes from 'prop-types';
/**
* Component that alerts if you click outside of it
*/
export default class OutsideAlerter extends Component {
constructor(props) {
super(props);
this.wrapperRef = React.createRef();
this.setWrapperRef = this.setWrapperRef.bind(this);
this.handleClickOutside = this.handleClickOutside.bind(this);
}
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
document.removeEventListener('mousedown', this.handleClickOutside);
}
/**
* Alert if clicked on outside of element
*/
handleClickOutside(event) {
if (this.wrapperRef && !this.wrapperRef.current.contains(event.target)) {
alert('You clicked outside of me!');
}
}
render() {
return <div ref={this.wrapperRef}>{this.props.children}</div>;
}
}
OutsideAlerter.propTypes = {
children: PropTypes.element.isRequired,
};
钩子实现：
import React, { useRef, useEffect } from "react";
/**
* Hook that alerts clicks outside of the passed ref
*/
function useOutsideAlerter(ref) {
useEffect(() => {
/**
* Alert if clicked on outside of element
*/
function handleClickOutside(event) {
if (ref.current && !ref.current.contains(event.target)) {
alert("You clicked outside of me!");
}
}
// Bind the event listener
document.addEventListener("mousedown", handleClickOutside);
return () => {
// Unbind the event listener on clean up
document.removeEventListener("mousedown", handleClickOutside);
};
}, [ref]);
}
/**
* Component that alerts if you click outside of it
*/
export default function OutsideAlerter(props) {
const wrapperRef = useRef(null);
useOutsideAlerter(wrapperRef);
return <div ref={wrapperRef}>{props.children}</div>;
}
2021 更新：
自从我添加这个回复已经有一段时间了，因为它似乎仍然引起了一些兴趣，我想我会把它更新到一个更新的 React 版本。在 2021 年，这就是我编写此组件的方式：
import React, { useState } from "react";
import "./DropDown.css";
export function DropDown({ options, callback }) {
const [selected, setSelected] = useState("");
const [expanded, setExpanded] = useState(false);
function expand() {
setExpanded(true);
}
function close() {
setExpanded(false);
}
function select(event) {
const value = event.target.textContent;
callback(value);
close();
setSelected(value);
}
return (
<div className="dropdown" tabIndex={0} onFocus={expand} onBlur={close} >
<div>{selected}</div>
{expanded ? (
<div className={"dropdown-options-list"}>
{options.map((O) => (
<div className={"dropdown-option"} onClick={select}>
{O}
</div>
))}
</div>
) : null}
</div>
);
}
这是最适合我的解决方案，无需将事件附加到容器：
某些 HTML 元素可以具有所谓的“焦点”，例如输入元素。当这些元素失去焦点时，它们也会响应模糊事件。
要使任何元素具有获得焦点的能力，只需确保将其 tabindex 属性设置为 -1 以外的任何值。在常规 HTML 中，这将通过设置tabindex属性来实现，但在 React 中您必须使用tabIndex（注意大写I）。
您也可以通过 JavaScript 使用 element.setAttribute('tabindex',0)
这就是我用它来制作自定义下拉菜单的目的。
var DropDownMenu = React.createClass({
getInitialState: function(){
return {
expanded: false
}
},
expand: function(){
this.setState({expanded: true});
},
collapse: function(){
this.setState({expanded: false});
},
render: function(){
if(this.state.expanded){
var dropdown = ...; //the dropdown content
} else {
var dropdown = undefined;
}
return (
<div className="dropDownMenu" tabIndex="0" onBlur={ this.collapse } >
<div className="currentValue" onClick={this.expand}>
{this.props.displayValue}
</div>
{dropdown}
</div>
);
}
});
我被困在同样的问题上。我参加聚会有点晚了，但对我来说这是一个非常好的解决方案。希望它会对其他人有所帮助。您需要findDOMNode从react-dom
import ReactDOM from 'react-dom';
// ... ✂
componentDidMount() {
document.addEventListener('click', this.handleClickOutside, true);
}
componentWillUnmount() {
document.removeEventListener('click', this.handleClickOutside, true);
}
handleClickOutside = event => {
const domNode = ReactDOM.findDOMNode(this);
if (!domNode || !domNode.contains(event.target)) {
this.setState({
visible: false
});
}
}
您可以创建一个名为useComponentVisible.
import { useState, useEffect, useRef } from 'react';
export default function useComponentVisible(initialIsVisible) {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef(null);
const handleClickOutside = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
setIsComponentVisible(false);
}
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
});
return { ref, isComponentVisible, setIsComponentVisible };
}
然后在您希望添加功能的组件中执行以下操作：
const DropDown = () => {
const { ref, isComponentVisible } = useComponentVisible(true);
return (
<div ref={ref}>
{isComponentVisible && (<p>Dropdown Component</p>)}
</div>
);
}
在此处查找代码沙盒示例。
在这里尝试了很多方法后，我决定使用github.com/Pomax/react-onclickoutside，因为它很完整。
我通过 npm 安装了module并将其导入到我的组件中：
import onClickOutside from 'react-onclickoutside'
然后，在我的组件类中，我定义了handleClickOutside方法：
handleClickOutside = () => {
console.log('onClickOutside() method called')
}
在导出我的组件时，我将其包裹在onClickOutside()：
export default onClickOutside(NameOfComponent)
而已。
基于 Tanner Linsley在 JSConf Hawaii 2020上的精彩演讲的Hook 实现：
useOuterClick 应用程序接口const Client = () => {
const innerRef = useOuterClick(ev => {/*event handler code on outer click*/});
return <div ref={innerRef}> Inside </div>
};
function useOuterClick(callback) {
const callbackRef = useRef(); // initialize mutable ref, which stores callback
const innerRef = useRef(); // returned to client, who marks "border" element
// update cb on each render, so second useEffect has access to current value
useEffect(() => { callbackRef.current = callback; });
useEffect(() => {
document.addEventListener("click", handleClick);
return () => document.removeEventListener("click", handleClick);
function handleClick(e) {
if (innerRef.current && callbackRef.current &&
!innerRef.current.contains(e.target)
) callbackRef.current(e);
}
}, []); // no dependencies -> stable click listener
return innerRef; // convenience for client (doesn't need to init ref himself)
}
这是一个工作示例：
useOuterClick利用可变引用来提供精益ClientAPI[]deps）生命周期的稳定点击监听器Client 可以设置回调而无需记住它 useCallbackiOS 通常只将某些元素视为可点击的。要使外部点击起作用，请选择不同的点击侦听器document- 不包括body. 例如，在 React 根上添加一个侦听器div并扩展其高度，例如height: 100vh，以捕获所有外部点击。资料来源：quirksmode.org