Tôi đang tìm cách để phát hiện nếu một sự kiện nhấp xảy ra bên ngoài một thành phần, như được mô tả trong bài viết này . jQuery near () được sử dụng để xem liệu mục tiêu từ một sự kiện nhấp có yếu tố dom là một trong những cha mẹ của nó không. Nếu có sự trùng khớp, sự kiện nhấp thuộc về một trong những đứa trẻ và do đó không được coi là nằm ngoài thành phần.

Vì vậy, trong thành phần của tôi, tôi muốn đính kèm một trình xử lý nhấp chuột vào cửa sổ. Khi xử lý bắn tôi cần so sánh mục tiêu với con dom của thành phần của tôi.

Sự kiện nhấp chứa các thuộc tính như "đường dẫn" dường như giữ đường dẫn dom mà sự kiện đã đi. Tôi không chắc nên so sánh cái gì hoặc làm thế nào để vượt qua nó một cách tốt nhất và tôi nghĩ ai đó chắc chắn đã đưa nó vào một chức năng tiện ích thông minh ... Không?

Thay đổi cách sử dụng trong React 16.3+.

Giải pháp sau đây sử dụng ES6 và tuân theo các thực tiễn tốt nhất để ràng buộc cũng như thiết lập ref thông qua một phương thức.

Để xem nó trong hành động:

• Thực hiện lớp
• Móc thực hiện

Thực hiện lớp học:

import React, { Component } from 'react';

/**
 * 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,
};

Móc thực hiện:

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

Đây là giải pháp phù hợp nhất với tôi mà không cần đính kèm các sự kiện vào container:

Một số phần tử HTML nhất định có thể có cái được gọi là " tiêu điểm ", ví dụ như các phần tử đầu vào. Những yếu tố đó cũng sẽ phản ứng với sự kiện mờ , khi họ mất trọng tâm đó.

Để cung cấp cho bất kỳ yếu tố nào khả năng tập trung, chỉ cần đảm bảo thuộc tính tabindex của nó được đặt thành bất kỳ thứ gì ngoài -1. Trong HTML thông thường sẽ bằng cách đặt tabindexthuộc tính, nhưng trong React bạn phải sử dụng tabIndex(lưu ý viết hoa I).

Bạn cũng có thể làm điều đó thông qua JavaScript với element.setAttribute('tabindex',0)

Đây là những gì tôi đã sử dụng nó để làm menu DropDown tùy chỉnh.

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

Tôi đã bị mắc kẹt trong cùng một vấn đề. Tôi đến bữa tiệc muộn một chút, nhưng với tôi đây là một giải pháp thực sự tốt. Hy vọng nó sẽ giúp ích cho người khác. Bạn cần nhập findDOMNodetừ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
        });
    }
}

Phương pháp tiếp cận móc phản ứng (16.8 +)

Bạn có thể tạo ra một cái móc tái sử dụng được gọi là 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 };
}

Sau đó, trong thành phần bạn muốn thêm chức năng để làm như sau:

const DropDown = () => {
    const { ref, isComponentVisible } = useComponentVisible(true);
    return (
       <div ref={ref}>
          {isComponentVisible && (<p>Dropdown Component</p>)}
       </div>
    );

}

Tìm một ví dụ về mã và hộp ở đây.

Sau khi thử nhiều phương pháp ở đây, tôi quyết định sử dụng github.com/Pomax/react-onclickoutside vì mức độ hoàn thiện của nó.

Tôi đã cài đặt mô-đun qua npm và nhập nó vào thành phần của mình:

import onClickOutside from 'react-onclickoutside'

Sau đó, trong lớp thành phần của tôi, tôi đã định nghĩa handleClickOutsidephương thức:

handleClickOutside = () => {
  console.log('onClickOutside() method called')
}

Và khi xuất thành phần của tôi, tôi gói nó vào onClickOutside():

export default onClickOutside(NameOfComponent)

Đó là nó.

Tôi đã tìm thấy một giải pháp nhờ Ben Alpert trên thảo luận.reactjs.org . Cách tiếp cận được đề xuất gắn một trình xử lý vào tài liệu nhưng hóa ra lại có vấn đề. Nhấp vào một trong các thành phần trong cây của tôi dẫn đến việc đăng ký lại đã loại bỏ phần tử được nhấp khi cập nhật. Bởi vì việc đăng ký lại từ React xảy ra trước khi trình xử lý thân tài liệu được gọi, phần tử không được phát hiện là "bên trong" cây.

Giải pháp cho vấn đề này là thêm trình xử lý vào phần tử gốc của ứng dụng.

chủ yếu:

window.__myapp_container = document.getElementById('app')
React.render(<App/>, window.__myapp_container)

thành phần:

import { Component, PropTypes } from 'react';
import ReactDOM from 'react-dom';

export default class ClickListener extends Component {

  static propTypes = {
    children: PropTypes.node.isRequired,
    onClickOutside: PropTypes.func.isRequired
  }

  componentDidMount () {
    window.__myapp_container.addEventListener('click', this.handleDocumentClick)
  }

  componentWillUnmount () {
    window.__myapp_container.removeEventListener('click', this.handleDocumentClick)
  }

  /* using fat arrow to bind to instance */
  handleDocumentClick = (evt) => {
    const area = ReactDOM.findDOMNode(this.refs.area);

    if (!area.contains(evt.target)) {
      this.props.onClickOutside(evt)
    }
  }

  render () {
    return (
      <div ref='area'>
       {this.props.children}
      </div>
    )
  }
}

Triển khai hook dựa trên bài nói chuyện xuất sắc của Tanner Linsley tại JSConf Hawaii 2020 :

useOuterClick API móc

const Client = () => {
  const innerRef = useOuterClick(ev => { /* what you want do on outer click */ });
  return <div ref={innerRef}> Inside </div> 
};

Thực hiện

/*
  Custom Hook
*/
function useOuterClick(callback) {
  const innerRef = useRef();
  const callbackRef = useRef();

  // set current callback in ref, before second useEffect uses it
  useEffect(() => { // useEffect wrapper to be safe for concurrent mode
    callbackRef.current = callback;
  });

  useEffect(() => {
    document.addEventListener("click", handleClick);
    return () => document.removeEventListener("click", handleClick);

    // read most recent callback and innerRef dom node from refs
    function handleClick(e) {
      if (
        innerRef.current && 
        callbackRef.current &&
        !innerRef.current.contains(e.target)
      ) {
        callbackRef.current(e);
      }
    }
  }, []); // no need for callback + innerRef dep
  
  return innerRef; // return ref; client can omit `useRef`
}

/*
  Usage 
*/
const Client = () => {
  const [counter, setCounter] = useState(0);
  const innerRef = useOuterClick(e => {
    // counter state is up-to-date, when handler is called
    alert(`Clicked outside! Increment counter to ${counter + 1}`);
    setCounter(c => c + 1);
  });
  return (
    <div>
      <p>Click outside!</p>
      <div id="container" ref={innerRef}>
        Inside, counter: {counter}
      </div>
    </div>
  );
};

ReactDOM.render(<Client />, document.getElementById("root"));

#container { border: 1px solid red; padding: 20px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js" integrity="sha256-Ef0vObdWpkMAnxp39TYSLVS/vVUokDE8CDFnx7tjY6U=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js" integrity="sha256-p2yuFdE8hNZsQ31Qk+s8N+Me2fL5cc6NKXOC0U9uGww=" crossorigin="anonymous"></script>
<script> var {useRef, useEffect, useCallback, useState} = React</script>
<div id="root"></div>

useOuterClicksử dụng các ref có thể thay đổi để tạo API nạc cho Client. Một cuộc gọi lại có thể được thiết lập mà không cần phải ghi nhớ nó thông qua useCallback. Phần thân gọi lại vẫn có quyền truy cập vào các đạo cụ và trạng thái gần đây nhất (không có giá trị đóng cũ).

Lưu ý cho người dùng iOS

iOS chỉ xử lý một số yếu tố nhất định là có thể nhấp. Để tránh hành vi này, hãy chọn một trình nghe nhấp chuột bên ngoài khác document- không có gì bao gồm cả body. Ví dụ: bạn có thể thêm một trình lắng nghe vào gốc React divtrong ví dụ trên và mở rộng chiều cao của nó ( height: 100vhhoặc tương tự) để bắt tất cả các nhấp chuột bên ngoài. Nguồn: quirksmode.org và câu trả lời này

Không có câu trả lời nào khác ở đây làm việc cho tôi. Tôi đã cố gắng để ẩn một cửa sổ bật lên trên mờ, nhưng vì nội dung được định vị tuyệt đối, onBlur đã bắn ngay cả khi nhấp vào nội dung bên trong.

Đây là một cách tiếp cận đã làm việc cho tôi:

// Inside the component:
onBlur(event) {
    // currentTarget refers to this component.
    // relatedTarget refers to the element where the user clicked (or focused) which
    // triggered this event.
    // So in effect, this condition checks if the user clicked outside the component.
    if (!event.currentTarget.contains(event.relatedTarget)) {
        // do your thing.
    }
},

Hi vọng điêu nay co ich.

[Cập nhật] Giải pháp với Phản ứng ^ 16.8 bằng cách sử dụng Móc

CodeSandbox

import React, { useEffect, useRef, useState } from 'react';

const SampleComponent = () => {
    const [clickedOutside, setClickedOutside] = useState(false);
    const myRef = useRef();

    const handleClickOutside = e => {
        if (!myRef.current.contains(e.target)) {
            setClickedOutside(true);
        }
    };

    const handleClickInside = () => setClickedOutside(false);

    useEffect(() => {
        document.addEventListener('mousedown', handleClickOutside);
        return () => document.removeEventListener('mousedown', handleClickOutside);
    });

    return (
        <button ref={myRef} onClick={handleClickInside}>
            {clickedOutside ? 'Bye!' : 'Hello!'}
        </button>
    );
};

export default SampleComponent;

Giải pháp với Phản ứng ^ 16.3 :

CodeSandbox

import React, { Component } from "react";

class SampleComponent extends Component {
  state = {
    clickedOutside: false
  };

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  myRef = React.createRef();

  handleClickOutside = e => {
    if (!this.myRef.current.contains(e.target)) {
      this.setState({ clickedOutside: true });
    }
  };

  handleClickInside = () => this.setState({ clickedOutside: false });

  render() {
    return (
      <button ref={this.myRef} onClick={this.handleClickInside}>
        {this.state.clickedOutside ? "Bye!" : "Hello!"}
      </button>
    );
  }
}

export default SampleComponent;

Đây là cách tiếp cận của tôi (bản demo - https://jsfiddle.net/agymay93/4/ ):

Tôi đã tạo thành phần đặc biệt được gọi WatchClickOutsidevà nó có thể được sử dụng như (tôi giả sử JSXcú pháp):

<WatchClickOutside onClickOutside={this.handleClose}>
  <SomeDropdownEtc>
</WatchClickOutside>

Đây là mã WatchClickOutsidethành phần:

import React, { Component } from 'react';

export default class WatchClickOutside extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentWillMount() {
    document.body.addEventListener('click', this.handleClick);
  }

  componentWillUnmount() {
    // remember to remove all events to avoid memory leaks
    document.body.removeEventListener('click', this.handleClick);
  }

  handleClick(event) {
    const {container} = this.refs; // get container that we'll wait to be clicked outside
    const {onClickOutside} = this.props; // get click outside callback
    const {target} = event; // get direct click event target

    // if there is no proper callback - no point of checking
    if (typeof onClickOutside !== 'function') {
      return;
    }

    // if target is container - container was not clicked outside
    // if container contains clicked target - click was not outside of it
    if (target !== container && !container.contains(target)) {
      onClickOutside(event); // clicked outside - fire callback
    }
  }

  render() {
    return (
      <div ref="container">
        {this.props.children}
      </div>
    );
  }
}

Điều này đã có nhiều câu trả lời nhưng họ không giải quyết e.stopPropagation()và ngăn nhấp vào các liên kết phản ứng bên ngoài yếu tố bạn muốn đóng.

Do thực tế là React có trình xử lý sự kiện nhân tạo của riêng bạn, bạn không thể sử dụng tài liệu làm cơ sở cho người nghe sự kiện. Bạn cần phải làm e.stopPropagation()điều này vì React sử dụng tài liệu của chính nó. Nếu bạn sử dụng ví dụ document.querySelector('body')thay thế. Bạn có thể ngăn chặn nhấp chuột từ liên kết React. Sau đây là một ví dụ về cách tôi thực hiện nhấp bên ngoài và đóng.
Điều này sử dụng ES6 và React 16.3 .

import React, { Component } from 'react';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
    };

    this.insideContainer = React.createRef();
  }

  componentWillMount() {
    document.querySelector('body').addEventListener("click", this.handleClick, false);
  }

  componentWillUnmount() {
    document.querySelector('body').removeEventListener("click", this.handleClick, false);
  }

  handleClick(e) {
    /* Check that we've clicked outside of the container and that it is open */
    if (!this.insideContainer.current.contains(e.target) && this.state.isOpen === true) {
      e.preventDefault();
      e.stopPropagation();
      this.setState({
        isOpen: false,
      })
    }
  };

  togggleOpenHandler(e) {
    e.preventDefault();

    this.setState({
      isOpen: !this.state.isOpen,
    })
  }

  render(){
    return(
      <div>
        <span ref={this.insideContainer}>
          <a href="#open-container" onClick={(e) => this.togggleOpenHandler(e)}>Open me</a>
        </span>
        <a href="/" onClick({/* clickHandler */})>
          Will not trigger a click when inside is open.
        </a>
      </div>
    );
  }
}

export default App;

Đối với những người cần định vị tuyệt đối, một tùy chọn đơn giản mà tôi đã chọn là thêm một thành phần trình bao bọc được tạo kiểu để bao phủ toàn bộ trang bằng một nền trong suốt. Sau đó, bạn có thể thêm một onClick vào thành phần này để đóng thành phần bên trong của bạn.

<div style={{
        position: 'fixed',
        top: '0', right: '0', bottom: '0', left: '0',
        zIndex: '1000',
      }} onClick={() => handleOutsideClick()} >
    <Content style={{position: 'absolute'}}/>
</div>

Vì hiện tại nếu bạn thêm một trình xử lý nhấp chuột vào nội dung, sự kiện cũng sẽ được truyền đến div trên và do đó kích hoạt handlerOutsideClick. Nếu đây không phải là hành vi mong muốn của bạn, chỉ cần dừng chương trình sự kiện trên trình xử lý của bạn.

<Content style={{position: 'absolute'}} onClick={e => {
                                          e.stopPropagation();
                                          desiredFunctionCall();
                                        }}/>

`

Để mở rộng câu trả lời được chấp nhận của Ben Bud , nếu bạn đang sử dụng các thành phần theo kiểu, việc chuyển các tham chiếu theo cách đó sẽ gây ra lỗi cho bạn như "this.wrapperRef.contains không phải là một chức năng".

Các sửa chữa được đề xuất, trong các ý kiến, để bọc thành phần theo kiểu với một div và vượt qua ref ở đó, hoạt động. Có nói rằng, trong các tài liệu của họ, họ đã giải thích lý do cho việc này và việc sử dụng refs đúng cách trong các thành phần theo kiểu:

Truyền một ref prop cho một thành phần được tạo kiểu sẽ cung cấp cho bạn một thể hiện của trình bao bọc StyledComponent, nhưng không phải cho nút DOM bên dưới. Điều này là do cách thức làm việc của refs. Không thể gọi các phương thức DOM, như tiêu điểm, trên các hàm bao của chúng tôi trực tiếp. Để có được một tham chiếu đến nút DOM được bao bọc thực tế, thay vào đó hãy chuyển cuộc gọi lại đến prop bên trong.

Thích như vậy:

<StyledDiv innerRef={el => { this.el = el }} />

Sau đó, bạn có thể truy cập nó trực tiếp trong chức năng "handleClickOutside":

handleClickOutside = e => {
    if (this.el && !this.el.contains(e.target)) {
        console.log('clicked outside')
    }
}

Điều này cũng áp dụng cho phương pháp "onBlur":

componentDidMount(){
    this.el.focus()
}
blurHandler = () => {
    console.log('clicked outside')
}
render(){
    return(
        <StyledDiv
            onBlur={this.blurHandler}
            tabIndex="0"
            innerRef={el => { this.el = el }}
        />
    )
}

Material-UI có một thành phần nhỏ để giải quyết vấn đề này: https : // m vật liệu- comp.com/entsonents / click -away-listener / mà bạn có thể chọn nó. Nó có trọng lượng 1,5 kB được nén, nó hỗ trợ di động, IE 11 và cổng.

Mối quan tâm lớn nhất của tôi với tất cả các câu trả lời khác là phải lọc các sự kiện nhấp chuột từ gốc / gốc xuống. Tôi thấy cách dễ nhất là chỉ cần đặt phần tử anh chị em với vị trí: cố định, chỉ số z 1 phía sau thả xuống và xử lý sự kiện nhấp chuột trên phần tử cố định bên trong cùng một thành phần. Giữ mọi thứ tập trung vào một thành phần nhất định.

Mã ví dụ

#HTML
<div className="parent">
  <div className={`dropdown ${this.state.open ? open : ''}`}>
    ...content
  </div>
  <div className="outer-handler" onClick={() => this.setState({open: false})}>
  </div>
</div>

#SASS
.dropdown {
  display: none;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 100;
  &.open {
    display: block;
  }
}
.outer-handler {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    z-index: 99;
    display: none;
    &.open {
      display: block;
    }
}

componentWillMount(){

  document.addEventListener('mousedown', this.handleClickOutside)
}

handleClickOutside(event) {

  if(event.path[0].id !== 'your-button'){
     this.setState({showWhatever: false})
  }
}

Sự kiện path[0]là mục cuối cùng được nhấp

Tôi đã sử dụng mô-đun này (tôi không có liên kết với tác giả)

npm install react-onclickout --save

const ClickOutHandler = require('react-onclickout');
 
class ExampleComponent extends React.Component {
 
  onClickOut(e) {
    if (hasClass(e.target, 'ignore-me')) return;
    alert('user clicked outside of the component!');
  }
 
  render() {
    return (
      <ClickOutHandler onClickOut={this.onClickOut}>
        <div>Click outside of me!</div>
      </ClickOutHandler>
    );
  }
}

Nó đã làm công việc độc đáo.

Tôi đã làm điều này một phần bằng cách làm theo điều này và bằng cách làm theo các tài liệu chính thức của React về việc xử lý các ref yêu cầu phản ứng ^ 16.3. Đây là điều duy nhất hiệu quả với tôi sau khi thử một số gợi ý khác ở đây ...

class App extends Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }
  componentWillMount() {
    document.addEventListener("mousedown", this.handleClick, false);
  }
  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClick, false);
  }
  handleClick = e => {
    if (this.inputRef.current === e.target) {
      return;
    }
    this.handleclickOutside();
  };
handleClickOutside(){
...***code to handle what to do when clicked outside***...
}
render(){
return(
<div>
...***code for what's outside***...
<span ref={this.inputRef}>
...***code for what's "inside"***...
</span>
...***code for what's outside***
)}}

Một ví dụ với Chiến lược

Tôi thích các giải pháp được cung cấp sử dụng để làm điều tương tự bằng cách tạo một trình bao bọc xung quanh thành phần.

Vì đây là một hành vi nhiều hơn, tôi nghĩ về Chiến lược và đã đưa ra những điều sau đây.

Tôi mới sử dụng React và tôi cần một chút trợ giúp để lưu một số bản tóm tắt trong các trường hợp sử dụng

Vui lòng xem lại và cho tôi biết những gì bạn nghĩ.

ClickOutsideBehavior

import ReactDOM from 'react-dom';

export default class ClickOutsideBehavior {

  constructor({component, appContainer, onClickOutside}) {

    // Can I extend the passed component's lifecycle events from here?
    this.component = component;
    this.appContainer = appContainer;
    this.onClickOutside = onClickOutside;
  }

  enable() {

    this.appContainer.addEventListener('click', this.handleDocumentClick);
  }

  disable() {

    this.appContainer.removeEventListener('click', this.handleDocumentClick);
  }

  handleDocumentClick = (event) => {

    const area = ReactDOM.findDOMNode(this.component);

    if (!area.contains(event.target)) {
        this.onClickOutside(event)
    }
  }
}

Sử dụng mẫu

import React, {Component} from 'react';
import {APP_CONTAINER} from '../const';
import ClickOutsideBehavior from '../ClickOutsideBehavior';

export default class AddCardControl extends Component {

  constructor() {
    super();

    this.state = {
      toggledOn: false,
      text: ''
    };

    this.clickOutsideStrategy = new ClickOutsideBehavior({
      component: this,
      appContainer: APP_CONTAINER,
      onClickOutside: () => this.toggleState(false)
    });
  }

  componentDidMount () {

    this.setState({toggledOn: !!this.props.toggledOn});
    this.clickOutsideStrategy.enable();
  }

  componentWillUnmount () {
    this.clickOutsideStrategy.disable();
  }

  toggleState(isOn) {

    this.setState({toggledOn: isOn});
  }

  render() {...}
}

Ghi chú

Tôi đã nghĩ đến việc lưu trữ các componentmóc vòng đời đã qua và ghi đè chúng bằng các phương thức tương tự như sau:

const baseDidMount = component.componentDidMount;

component.componentDidMount = () => {
  this.enable();
  baseDidMount.call(component)
}

componentlà thành phần được truyền cho hàm tạo của ClickOutsideBehavior.
Điều này sẽ loại bỏ bật / tắt bảng ghi từ người dùng của hành vi này nhưng nó trông không đẹp lắm

Trong trường hợp DROPDOWN của tôi , giải pháp của Ben Bud hoạt động tốt, nhưng tôi có một nút chuyển đổi riêng với trình xử lý onClick. Vì vậy, logic nhấp chuột bên ngoài đã xung đột với nút onClick toggler. Đây là cách tôi giải quyết nó bằng cách chuyển qua ref của nút:

import React, { useRef, useEffect, useState } from "react";

/**
 * Hook that triggers onClose when clicked outside of ref and buttonRef elements
 */
function useOutsideClicker(ref, buttonRef, onOutsideClick) {
  useEffect(() => {

    function handleClickOutside(event) {
      /* clicked on the element itself */
      if (ref.current && !ref.current.contains(event.target)) {
        return;
      }

      /* clicked on the toggle button */
      if (buttonRef.current && !buttonRef.current.contains(event.target)) {
        return;
      }

      /* If it's something else, trigger onClose */
      onOutsideClick();
    }

    // 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 DropdownMenu(props) {
  const wrapperRef = useRef(null);
  const buttonRef = useRef(null);
  const [dropdownVisible, setDropdownVisible] = useState(false);

  useOutsideClicker(wrapperRef, buttonRef, closeDropdown);

  const toggleDropdown = () => setDropdownVisible(visible => !visible);

  const closeDropdown = () => setDropdownVisible(false);

  return (
    <div>
      <button onClick={toggleDropdown} ref={buttonRef}>Dropdown Toggler</button>
      {dropdownVisible && <div ref={wrapperRef}>{props.children}</div>}
    </div>
  );
}

Nếu bạn muốn sử dụng một thành phần nhỏ bé (466 Byte gzipped) đã tồn tại cho chức năng này thì bạn có thể kiểm tra thư viện này phản ứng outclick .

Điểm hay của thư viện là nó cũng cho phép bạn phát hiện các nhấp chuột bên ngoài một thành phần và bên trong một thành phần khác. Nó cũng hỗ trợ phát hiện các loại sự kiện khác.

Nếu bạn muốn sử dụng một thành phần nhỏ bé (466 Byte gzipped) đã tồn tại cho chức năng này thì bạn có thể kiểm tra thư viện này phản ứng outclick . Nó ghi lại các sự kiện bên ngoài thành phần phản ứng hoặc phần tử jsx.

Điểm hay của thư viện là nó cũng cho phép bạn phát hiện các nhấp chuột bên ngoài một thành phần và bên trong một thành phần khác. Nó cũng hỗ trợ phát hiện các loại sự kiện khác.

Tôi biết đây là một câu hỏi cũ, nhưng tôi tiếp tục gặp phải vấn đề này và tôi đã gặp nhiều rắc rối khi tìm ra điều này trong một định dạng đơn giản. Vì vậy, nếu điều này sẽ giúp mọi người dễ dàng hơn một chút, hãy sử dụng InsideClickHandler bằng airbnb. Nó là một plugin đơn giản nhất để thực hiện nhiệm vụ này mà không cần viết mã của riêng bạn.

Thí dụ:

hideresults(){
   this.setState({show:false})
}
render(){
 return(
 <div><div onClick={() => this.setState({show:true})}>SHOW</div> {(this.state.show)? <OutsideClickHandler onOutsideClick={() => 
  {this.hideresults()}} > <div className="insideclick"></div> </OutsideClickHandler> :null}</div>
 )
}

import { useClickAway } from "react-use";

useClickAway(ref, () => console.log('OUTSIDE CLICKED'));

bạn có thể cho bạn một cách đơn giản để giải quyết vấn đề của bạn, tôi chỉ cho bạn:

....

const [dropDwonStatus , setDropDownStatus] = useState(false)

const openCloseDropDown = () =>{
 setDropDownStatus(prev => !prev)
}

const closeDropDown = ()=> {
 if(dropDwonStatus){
   setDropDownStatus(false)
 }
}
.
.
.
<parent onClick={closeDropDown}>
 <child onClick={openCloseDropDown} />
</parent>

Điều này làm việc cho tôi, chúc may mắn;)

Tôi tìm thấy điều này từ bài viết dưới đây:

render () {return ({this.node = node;}}> Toggle Popover {this.state.popupVisible && (Tôi là một popover!)}); }}

Đây là một bài viết tuyệt vời về vấn đề này: "Xử lý các nhấp chuột bên ngoài các thành phần React" https://larsgraubner.com/handle-outside-clicks-react/

Thêm một onClicktrình xử lý vào thùng chứa cấp cao nhất của bạn và tăng giá trị trạng thái bất cứ khi nào người dùng nhấp vào bên trong. Truyền giá trị đó cho thành phần có liên quan và bất cứ khi nào giá trị thay đổi, bạn có thể thực hiện công việc.

Trong trường hợp này, chúng tôi gọi this.closeDropdown()bất cứ khi nào clickCountgiá trị thay đổi.

Các incrementClickCountvụ cháy phương pháp trong .appthùng chứa nhưng không phải là .dropdownvì chúng tôi sử dụng event.stopPropagation()để ngăn chặn sự kiện bọt.

Mã của bạn có thể sẽ trông giống như thế này:

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            clickCount: 0
        };
    }
    incrementClickCount = () => {
        this.setState({
            clickCount: this.state.clickCount + 1
        });
    }
    render() {
        return (
            <div className="app" onClick={this.incrementClickCount}>
                <Dropdown clickCount={this.state.clickCount}/>
            </div>
        );
    }
}
class Dropdown extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false
        };
    }
    componentDidUpdate(prevProps) {
        if (this.props.clickCount !== prevProps.clickCount) {
            this.closeDropdown();
        }
    }
    toggleDropdown = event => {
        event.stopPropagation();
        return (this.state.open) ? this.closeDropdown() : this.openDropdown();
    }
    render() {
        return (
            <div className="dropdown" onClick={this.toggleDropdown}>
                ...
            </div>
        );
    }
}

Để làm cho giải pháp 'tập trung' hoạt động cho trình đơn thả xuống với người nghe sự kiện, bạn có thể thêm chúng bằng sự kiện onMouseDown thay vì onClick . Bằng cách đó, sự kiện sẽ kích hoạt và sau đó cửa sổ bật lên sẽ đóng như vậy:

<TogglePopupButton
                    onClick = { this.toggleDropup }
                    tabIndex = '0'
                    onBlur = { this.closeDropup }
                />
                { this.state.isOpenedDropup &&
                <ul className = { dropupList }>
                    { this.props.listItems.map((item, i) => (
                        <li
                            key = { i }
                            onMouseDown = { item.eventHandler }
                        >
                            { item.itemName}
                        </li>
                    ))}
                </ul>
                }

import ReactDOM from 'react-dom' ;

class SomeComponent {

  constructor(props) {
    // First, add this to your constructor
    this.handleClickOutside = this.handleClickOutside.bind(this);
  }

  componentWillMount() {
    document.addEventListener('mousedown', this.handleClickOutside, false); 
  }

  // Unbind event on unmount to prevent leaks
  componentWillUnmount() {
    window.removeEventListener('mousedown', this.handleClickOutside, false);
  }

  handleClickOutside(event) {
    if(!ReactDOM.findDOMNode(this).contains(event.path[0])){
       console.log("OUTSIDE");
    }
  }
}

Tôi đã thực hiện một giải pháp cho tất cả các dịp.

Bạn nên sử dụng Thành phần bậc cao để bọc thành phần mà bạn muốn lắng nghe các nhấp chuột bên ngoài nó.

Ví dụ thành phần này chỉ có một prop: "onClickyOutside" nhận chức năng.

ClickedOutside.js

import React, { Component } from "react";

export default class ClickedOutside extends Component {
  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  handleClickOutside = event => {
    // IF exists the Ref of the wrapped component AND his dom children doesnt have the clicked component 
    if (this.wrapperRef && !this.wrapperRef.contains(event.target)) {
      // A props callback for the ClikedClickedOutside
      this.props.onClickedOutside();
    }
  };

  render() {
    // In this piece of code I'm trying to get to the first not functional component
    // Because it wouldn't work if use a functional component (like <Fade/> from react-reveal)
    let firstNotFunctionalComponent = this.props.children;
    while (typeof firstNotFunctionalComponent.type === "function") {
      firstNotFunctionalComponent = firstNotFunctionalComponent.props.children;
    }

    // Here I'm cloning the element because I have to pass a new prop, the "reference" 
    const children = React.cloneElement(firstNotFunctionalComponent, {
      ref: node => {
        this.wrapperRef = node;
      },
      // Keeping all the old props with the new element
      ...firstNotFunctionalComponent.props
    });

    return <React.Fragment>{children}</React.Fragment>;
  }
}

UseOnClickOutside Hook - Phản ứng 16.8 +

Tạo một hàm useOnOutsideClick chung

export const useOnOutsideClick = handleOutsideClick => {
  const innerBorderRef = useRef();

  const onClick = event => {
    if (
      innerBorderRef.current &&
      !innerBorderRef.current.contains(event.target)
    ) {
      handleOutsideClick();
    }
  };

  useMountEffect(() => {
    document.addEventListener("click", onClick, true);
    return () => {
      document.removeEventListener("click", onClick, true);
    };
  });

  return { innerBorderRef };
};

const useMountEffect = fun => useEffect(fun, []);

Sau đó sử dụng móc trong bất kỳ thành phần chức năng.

const OutsideClickDemo = ({ currentMode, changeContactAppMode }) => {

  const [open, setOpen] = useState(false);
  const { innerBorderRef } = useOnOutsideClick(() => setOpen(false));

  return (
    <div>
      <button onClick={() => setOpen(true)}>open</button>
      {open && (
        <div ref={innerBorderRef}>
           <SomeChild/>
        </div>
      )}
    </div>
  );

};

Liên kết đến bản demo

Lấy cảm hứng một phần từ câu trả lời @ pau1fitzgerald.