ฉันกำลังมองหาวิธีการในการตรวจสอบหากมีเหตุการณ์เกิดขึ้นคลิกนอกขององค์ประกอบที่อธิบายไว้ในนี้บทความ jQuery nearby () ใช้เพื่อดูว่าเป้าหมายจากเหตุการณ์คลิกมีองค์ประกอบ dom เป็นหนึ่งในพาเรนต์หรือไม่ หากมีการแข่งขันเหตุการณ์คลิกเป็นของเด็ก ๆ คนหนึ่งและดังนั้นจึงไม่ถือว่าอยู่นอกองค์ประกอบ

ดังนั้นในองค์ประกอบของฉันฉันต้องการแนบตัวจัดการการคลิกกับหน้าต่าง เมื่อผู้ควบคุมยิงฉันต้องเปรียบเทียบเป้าหมายกับลูกโดมขององค์ประกอบของฉัน

เหตุการณ์คลิกมีคุณสมบัติเช่น "เส้นทาง" ซึ่งดูเหมือนว่าจะเก็บเส้นทาง dom ที่เหตุการณ์ได้เดินทาง ฉันไม่แน่ใจว่าจะเปรียบเทียบอะไรหรือจะสำรวจให้ดีที่สุดได้อย่างไรและฉันคิดว่าบางคนต้องใส่มันในฟังก์ชั่นยูทิลิตี้ที่ฉลาดอยู่แล้ว ... ไม่?

เปลี่ยนการใช้งานใน React 16.3+ แล้ว

โซลูชันต่อไปนี้ใช้ ES6 และปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุดสำหรับการผูกรวมถึงการตั้งค่าการอ้างอิงผ่านวิธีการ

หากต้องการดูการทำงาน:

• การใช้งานคลาส
• การใช้งาน hooks

การใช้งานระดับ:

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

การใช้งาน hooks:

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

นี่คือทางออกที่ดีที่สุดสำหรับฉันโดยไม่ต้องแนบกิจกรรมเข้ากับคอนเทนเนอร์:

องค์ประกอบ HTML บางอย่างสามารถมีสิ่งที่เรียกว่า " โฟกัส " เช่นองค์ประกอบอินพุต องค์ประกอบเหล่านั้นจะตอบสนองต่อเหตุการณ์เบลอเมื่อพวกเขาสูญเสียโฟกัส

เพื่อให้องค์ประกอบความสามารถในการมีโฟกัสให้ตรวจสอบให้แน่ใจว่าแอตทริบิวต์ tabindex นั้นถูกตั้งค่าเป็นอย่างอื่นที่ไม่ใช่ -1 ใน HTML ปกติที่จะมีการตั้งค่าtabindexคุณลักษณะ แต่ในการตอบสนองคุณต้องใช้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
        });
    }
}

React Hooks Approach (16.8 +)

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

}

ค้นหาตัวอย่างcodeandboxที่นี่

หลังจากลองวิธีการมากมายที่นี่ฉันตัดสินใจใช้github.com/Pomax/react-onclickoutsideเพราะมันเสร็จสมบูรณ์เพียงใด

ฉันติดตั้งโมดูลผ่านทาง npm และนำเข้าสู่ส่วนประกอบของฉัน

import onClickOutside from 'react-onclickoutside'

จากนั้นในระดับองค์ประกอบของฉันฉันกำหนด handleClickOutsideวิธีการ:

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

และเมื่อส่งออกชิ้นส่วนของฉันฉันห่อไว้ onClickOutside() :

export default onClickOutside(NameOfComponent)

แค่นั้นแหละ.

ผมพบว่าวิธีการแก้ปัญหาต้องขอบคุณเบนอัลเพิร์บนdiscuss.reactjs.org วิธีการที่แนะนำแนบตัวจัดการกับเอกสาร แต่กลายเป็นปัญหา การคลิกที่หนึ่งในองค์ประกอบในทรีของฉันทำให้เกิดการแสดงซ้ำซึ่งลบองค์ประกอบที่ถูกคลิกออกไป เพราะผู้กระทำจาก React เกิดขึ้นก่อนที่จะเรียกใช้ตัวจัดการเอกสารเอกสารองค์ประกอบจึงไม่ถูกตรวจพบว่าเป็น "ข้างใน" ต้นไม้

วิธีแก้ไขปัญหานี้คือการเพิ่มตัวจัดการในองค์ประกอบรูทแอพพลิเคชัน

หลัก:

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

ส่วนประกอบ:

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

การติดตั้ง Hook ตามการพูดคุยที่ยอดเยี่ยมของ Tanner Linsley ที่ JSConf Hawaii 2020 :

useOuterClick Hook API

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

การดำเนินงาน

/*
  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>

useOuterClickทำให้การใช้refs ไม่แน่นอนในการสร้าง API Clientลีนสำหรับ โทรกลับสามารถตั้งค่าได้โดยไม่ต้อง memoize useCallbackผ่านทาง ตัวเรียกกลับยังคงสามารถเข้าถึงอุปกรณ์ประกอบฉากและสถานะล่าสุด (ไม่มีค่าการปิดที่เก่า)

หมายเหตุสำหรับผู้ใช้ iOS

iOS ถือว่าองค์ประกอบบางอย่างเท่านั้นที่คลิกได้ เพื่อหลีกเลี่ยงปัญหานี้เลือกเป็นผู้ฟังที่ด้านนอกคลิกที่แตกต่างdocument- bodyไม่มีอะไรขึ้นรวมทั้ง เช่นคุณสามารถเพิ่มผู้ฟังบนรูท React divในตัวอย่างด้านบนและขยายความสูงของมัน ( height: 100vhหรือคล้ายกัน) เพื่อรับการคลิกภายนอกทั้งหมด แหล่งที่มา: quirksmode.orgและคำตอบนี้

ไม่มีคำตอบอื่นที่นี่ใช้ได้สำหรับฉัน ฉันพยายามซ่อนป๊อปอัพด้วยความพร่ามัว แต่เนื่องจากเนื้อหาอยู่ในตำแหน่งที่แน่นอน OnBlur จึงเริ่มยิงแม้กระทั่งคลิกที่เนื้อหาด้านในด้วย

นี่คือวิธีการที่ได้ผลสำหรับฉัน:

// 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.
    }
},

หวังว่านี่จะช่วยได้

[อัพเดท]วิธีแก้ปัญหาด้วยReact ^ 16.8โดยใช้Hooks

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;

โซลูชันที่ตอบสนอง ^ 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;

นี่คือวิธีการของฉัน (สาธิต - https://jsfiddle.net/agymay93/4/ ):

ฉันได้สร้างส่วนประกอบพิเศษที่เรียกว่าWatchClickOutsideและสามารถใช้เช่น (ฉันถือว่าJSXไวยากรณ์):

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

นี่คือรหัสของWatchClickOutsideส่วนประกอบ:

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

นี่มีคำตอบอยู่แล้วหลายข้อ แต่ไม่ได้กล่าวถึงe.stopPropagation()และป้องกันการคลิกลิงก์ตอบโต้ภายนอกองค์ประกอบที่คุณต้องการปิด

เนื่องจากความจริงที่ว่า React มีตัวจัดการเหตุการณ์เทียมของตัวเองคุณจึงไม่สามารถใช้เอกสารเป็นฐานสำหรับผู้ฟังเหตุการณ์ได้ คุณต้องทำe.stopPropagation()สิ่งนี้ก่อนเพราะ React ใช้เอกสารเอง ถ้าคุณใช้ตัวอย่างเช่นdocument.querySelector('body')แทน คุณสามารถป้องกันการคลิกจากลิงค์ตอบสนอง ต่อไปนี้เป็นตัวอย่างของวิธีที่ฉันใช้การคลิกภายนอกและปิด
นี้ใช้ES6และตอบสนอง 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;

สำหรับผู้ที่ต้องการตำแหน่งแน่นอนตัวเลือกง่าย ๆ ที่ฉันเลือกใช้คือการเพิ่มองค์ประกอบ wrapper ที่มีสไตล์ให้ครอบคลุมทั้งหน้าด้วยพื้นหลังโปร่งใส จากนั้นคุณสามารถเพิ่ม onClick ในองค์ประกอบนี้เพื่อปิดองค์ประกอบภายในของคุณ

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

เนื่องจากตอนนี้ถ้าคุณเพิ่มตัวจัดการการคลิกบนเนื้อหาเหตุการณ์จะถูกเผยแพร่ไปยัง div ด้านบนและทำให้ทริกเกอร์ handlerOutsideClick หากนี่ไม่ใช่พฤติกรรมที่คุณต้องการให้หยุดการสร้างเหตุการณ์ในตัวจัดการของคุณ

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

`

หากต้องการขยายคำตอบที่ได้รับการยอมรับจากBen Budหากคุณใช้ส่วนประกอบที่มีสไตล์การผ่านการอ้างอิงด้วยวิธีนั้นจะทำให้คุณมีข้อผิดพลาดเช่น "this.wrapperRef.contain ไม่ใช่ฟังก์ชัน"

การแก้ไขที่แนะนำในความคิดเห็นเพื่อห่อองค์ประกอบที่มีสไตล์ด้วย div และผ่านการอ้างอิงนั้นทำงานได้ ต้องบอกว่าในเอกสารของพวกเขาแล้วอธิบายเหตุผลสำหรับการนี้และการใช้งานที่เหมาะสมของการอ้างอิงภายในองค์ประกอบสไตล์:

การส่ง prop prop ไปยังคอมโพเนนต์ที่มีสไตล์จะให้อินสแตนซ์ของ wrapper StyledComponent แต่ไม่ใช่ไปยังโหนด DOM ต้นแบบ นี่เป็นเพราะการทำงานของผู้อ้างอิง เป็นไปไม่ได้ที่จะโทรหาวิธีการ DOM เช่นโฟกัสบน wrappers ของเราโดยตรง ในการรับการอ้างอิงไปยังโหนด DOM ที่แท้จริงที่ถูกล้อมรอบให้ส่งการเรียกกลับไปที่ innerRef prop แทน

ชอบมาก

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

จากนั้นคุณสามารถเข้าถึงได้โดยตรงภายในฟังก์ชั่น "handleClickOutside":

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

นอกจากนี้ยังใช้กับวิธี "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 มีส่วนประกอบขนาดเล็กเพื่อแก้ไขปัญหานี้: https://material-ui.com/components/click-away-listener/ซึ่งคุณสามารถเลือกได้ มันมีน้ำหนัก 1.5 kB gzipped รองรับมือถือ IE 11 และพอร์ทัล

ข้อกังวลที่ใหญ่ที่สุดของฉันสำหรับคำตอบอื่น ๆ ทั้งหมดคือการกรองเหตุการณ์การคลิกจากรูท / พาเรนต์ลง ฉันพบวิธีที่ง่ายที่สุดคือการตั้งองค์ประกอบพี่น้องด้วยตำแหน่ง: คงที่, z-index 1 ที่อยู่ด้านหลังดรอปดาวน์และจัดการเหตุการณ์คลิกบนองค์ประกอบคงที่ภายในองค์ประกอบเดียวกัน เก็บทุกสิ่งไว้ที่ส่วนกลางให้เป็นองค์ประกอบที่กำหนด

รหัสตัวอย่าง

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

กิจกรรมpath[0]เป็นรายการสุดท้ายที่คลิก

ฉันใช้โมดูลนี้ (ฉันไม่มีความเกี่ยวข้องกับผู้แต่ง)

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

มันทำงานได้ดี

ฉันทำสิ่งนี้บางส่วนโดยทำตามสิ่งนี้และทำตามเอกสารตอบโต้อย่างเป็นทางการเกี่ยวกับการจัดการอ้างอิงที่ต้องมีปฏิกิริยา ^ 16.3 นี่เป็นสิ่งเดียวที่ทำงานให้ฉันหลังจากลองคำแนะนำอื่น ๆ ที่นี่ ...

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

ตัวอย่างกับกลยุทธ์

ฉันชอบโซลูชันที่มีให้ซึ่งใช้ในการทำสิ่งเดียวกันโดยการสร้างเสื้อคลุมรอบองค์ประกอบ

เนื่องจากนี่เป็นพฤติกรรมที่มากกว่าฉันคิดถึงกลยุทธ์และทำสิ่งต่อไปนี้

ฉันใหม่กับ React และฉันต้องการความช่วยเหลือเล็กน้อยเพื่อบันทึกแผ่นเหล็กบางส่วนในกรณีการใช้งาน

โปรดตรวจสอบและบอกสิ่งที่คุณคิด

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

ตัวอย่างการใช้งาน

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() {...}
}

หมายเหตุ

ฉันคิดถึงการจัดเก็บcomponenthooks lifecycle ที่ผ่านไปและแทนที่พวกเขาด้วย method simillar ในสิ่งนี้:

const baseDidMount = component.componentDidMount;

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

componentClickOutsideBehaviorเป็นส่วนประกอบที่ผ่านมาคอนสตรัคของ
สิ่งนี้จะลบการเปิดใช้งาน / ปิดใช้งาน boilerplate จากผู้ใช้ของพฤติกรรมนี้ แต่มันก็ดูไม่ค่อยดีนัก

ในกรณี DROPDOWN ของฉันโซลูชันของBen Budทำงานได้ดี แต่ฉันมีปุ่มสลับแยกต่างหากที่มีตัวจัดการ onClick ตรรกะการคลิกภายนอกขัดแย้งกับปุ่มบนคลิก toggler นี่คือวิธีที่ฉันแก้ไขมันโดยผ่านการอ้างอิงของปุ่มเช่นกัน:

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

หากคุณต้องการใช้ส่วนประกอบเล็ก ๆ (466 Byte gzipped) ที่มีอยู่แล้วสำหรับฟังก์ชั่นนี้คุณสามารถตรวจสอบไลบรารี่ที่ตอบสนองต่อไลบรารี่นี้ได้

ข้อดีของไลบรารี่คือมันช่วยให้คุณตรวจจับการคลิกนอกองค์ประกอบและภายในอีกอัน นอกจากนี้ยังรองรับการตรวจจับเหตุการณ์ประเภทอื่น ๆ

หากคุณต้องการใช้ส่วนประกอบเล็ก ๆ (466 Byte gzipped) ที่มีอยู่แล้วสำหรับฟังก์ชั่นนี้คุณสามารถตรวจสอบไลบรารี่ที่ตอบสนองต่อไลบรารี่นี้ได้ มันจับเหตุการณ์นอกองค์ประกอบปฏิกิริยาหรือองค์ประกอบ jsx

ข้อดีของไลบรารี่คือมันช่วยให้คุณตรวจจับการคลิกนอกองค์ประกอบและภายในอีกอัน นอกจากนี้ยังรองรับการตรวจจับเหตุการณ์ประเภทอื่น ๆ

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ฉันก็เจอปัญหานี้และฉันมีปัญหามากมายในการหาสิ่งนี้ในรูปแบบที่เรียบง่าย ดังนั้นถ้าสิ่งนี้จะทำให้ชีวิตของใคร ๆ ง่ายขึ้นให้ใช้ OutsideClickHandler โดย airbnb มันเป็นปลั๊กอินที่ง่ายที่สุดในการทำงานนี้โดยไม่ต้องเขียนโค้ดของคุณเอง

ตัวอย่าง:

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

คุณเป็นวิธีง่ายๆในการแก้ปัญหาของคุณฉันแสดงให้คุณเห็น:

....

const [dropDwonStatus , setDropDownStatus] = useState(false)

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

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

มันใช้งานได้สำหรับฉันโชคดี;)

ฉันพบสิ่งนี้จากบทความด้านล่าง:

render () {return ({this.node = node;}}> สลับ Popover {this.state.popupVisible && (ฉันเป็น Popover!)}); }}

นี่เป็นบทความที่ยอดเยี่ยมเกี่ยวกับปัญหานี้: "จัดการการคลิกนอกส่วนประกอบ React" https://larsgraubner.com/handle-outside-clicks-react/

เพิ่มonClickตัวจัดการไปยังคอนเทนเนอร์ระดับบนสุดของคุณและเพิ่มค่าสถานะเมื่อใดก็ตามที่ผู้ใช้คลิกภายใน ส่งผ่านค่านั้นไปยังส่วนประกอบที่เกี่ยวข้องและเมื่อใดก็ตามที่การเปลี่ยนแปลงค่าคุณสามารถทำงานได้

ในกรณีนี้เราจะโทรติดต่อthis.closeDropdown()ทุกครั้งที่มีclickCountการเปลี่ยนแปลงค่า

incrementClickCountวิธีไฟภายใน.appตู้คอนเทนเนอร์ แต่ไม่ได้.dropdownเพราะเราใช้event.stopPropagation()เพื่อป้องกันไม่ให้เหตุการณ์เดือด

รหัสของคุณอาจดูเป็นดังนี้:

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

ที่จะทำให้'โฟกัส'การทำงานของโซลูชั่นสำหรับการเลื่อนลงกับผู้ฟังเหตุการณ์ที่คุณสามารถเพิ่มพวกเขาด้วยOnMouseDownเหตุการณ์แทนonClick ด้วยวิธีนี้เหตุการณ์จะเริ่มขึ้นและหลังจากนั้นป๊อปอัปจะปิดลงดังนี้:

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

ฉันทำทางออกสำหรับทุกโอกาส

คุณควรใช้ High Order Component เพื่อตัดองค์ประกอบที่คุณต้องการฟังการคลิกที่อยู่ด้านนอก

ตัวอย่างองค์ประกอบนี้มีเพียงหนึ่งเสา: "onClickedOutside" ที่ได้รับฟังก์ชั่น

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 - ตอบสนอง 16.8 +

สร้างฟังก์ชั่นการใช้งานทั่วไป OnOutsideClick

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, []);

จากนั้นใช้เบ็ดในองค์ประกอบการทำงานใด ๆ

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

};

ลิงก์ไปยังตัวอย่าง

แรงบันดาลใจบางส่วนโดย @ pau1fitzgerald คำตอบ