Bagaimana untuk Mengesan Klik di Luar Komponen Reaksi?

Cara Mengesan Klik Di Luar Komponen React

Untuk mengesan klik di luar komponen React, anda boleh menggunakan pendekatan berikut:

Pengendalian Acara

Lampirkan pendengar acara klik pada objek tetingkap. Apabila peristiwa klik berlaku, bandingkan elemen sasaran acara dengan anak DOM komponen. Jika sasaran bukan turunan komponen, maka klik dianggap di luar komponen.

Menggunakan DOM Traversal

Untuk membandingkan elemen sasaran dengan anak komponen, anda boleh menggunakan kaedah terdekat() atau mengandungi() yang disediakan oleh DOM.

Closest() Kaedah:

Kaedah terdekat() menyemak sama ada sesuatu elemen ialah keturunan unsur lain. Ia mengembalikan elemen nenek moyang terdekat yang sepadan dengan pemilih yang ditentukan.

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.closest('.my-component')) {
  // Click occurred outside the component
}

Contains() Kaedah:

Kaedah contains() menyemak sama ada elemen mengandungi elemen lain . Ia mengembalikan boolean yang menunjukkan sama ada elemen itu turunan daripada elemen lain.

const target = event.target;
const componentDOM = document.querySelector('.my-component');
if (!componentDOM.contains(target)) {
  // Click occurred outside the component
}

Pengurusan Rujukan

Untuk mengakses elemen DOM komponen, anda boleh menggunakan rujukan React. Berikan rujukan kepada elemen komponen, dan kemudian tanya DOM menggunakan ref.

Contoh Komponen Fungsian:

function OutsideAlerter(props) {
  const wrapperRef = useRef(null);

  useOutsideAlerter(wrapperRef);

  return <div ref="{wrapperRef}">{props.children}</div>;
}

function useOutsideAlerter(ref) {
  useEffect(() => {
    function handleClickOutside(event) {
      if (ref.current && !ref.current.contains(event.target)) {
        alert('You clicked outside of me!');
      }
    }

    document.addEventListener('mousedown', handleClickOutside);

    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, [ref]);
}

Contoh Komponen Kelas:

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

    this.wrapperRef = React.createRef();
  }

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

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

  handleClickOutside = (event) => {
    if (this.wrapperRef.current && !this.wrapperRef.current.contains(event.target)) {
      alert('You clicked outside of me!');
    }
  }

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

Dengan menggunakan teknik ini, anda boleh mengesan klik di luar dengan tepat komponen React, memberikan pengalaman pengguna yang lebih baik dan pengoptimuman prestasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengesan Klik di Luar Komponen Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!