Wie erkennt man Klicks außerhalb einer React-Komponente?

So erkennen Sie Klicks außerhalb von React-Komponenten

Um Klicks außerhalb einer React-Komponente zu erkennen, können Sie den folgenden Ansatz verwenden:

Ereignisbehandlung

Fügen Sie dem Fensterobjekt einen Klickereignis-Listener hinzu. Wenn das Klickereignis auftritt, vergleichen Sie das Zielelement des Ereignisses mit den untergeordneten DOM-Elementen der Komponente. Wenn das Ziel kein Nachkomme der Komponente ist, wird davon ausgegangen, dass sich der Klick außerhalb der Komponente befindet.

DOM-Traversal verwenden

Um das Zielelement mit den untergeordneten Elementen der Komponente zu vergleichen, können Sie verwenden die vom DOM bereitgestellten Methoden „closest()“ oder „contains()“.

Closest() Methode:

Die Methode close() prüft, ob ein Element ein Nachkomme eines anderen Elements ist. Es gibt das nächstgelegene Vorfahrenelement zurück, das dem angegebenen Selektor entspricht.

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

Contains()-Methode:

Die contains()-Methode prüft, ob ein Element ein anderes Element enthält . Es gibt einen booleschen Wert zurück, der angibt, ob das Element ein Nachkomme des anderen Elements ist.

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

Referenzverwaltung

Um auf das DOM-Element der Komponente zuzugreifen, können Sie React Refs verwenden. Weisen Sie dem Element der Komponente eine Referenz zu und fragen Sie dann das DOM mithilfe der Referenz ab.

Beispiel für eine funktionale Komponente:

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

Beispiel für eine Klassenkomponente:

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

Durch die Verwendung dieser Techniken können Sie Klicks außerhalb von React-Komponenten genau erkennen und so für bessere Benutzererfahrungen und Leistung sorgen Optimierungen.

Das obige ist der detaillierte Inhalt vonWie erkennt man Klicks außerhalb einer React-Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!