web-dev-qa-db-fra.com

React JavaScript OnCliquez à l'extérieur de Div

logout with svg icon

Je travaille sur un site Web et je dispose actuellement d'une icône SVG pour la déconnexion. Lorsque l'icône est cliquée sur une superposition d'une option de signalisation. Lorsque l'utilisateur clique sur Signout, il doit effectuer une certaine opération et lorsque l'utilisateur clique sur la superposition de div la superposition doit être masqué. Je ne parviens pas à y parvenir.

j'ai essayé de me concentrer sur DIV à l'aide de Tabindex, mais l'option de signalisation n'est plus cliquable.

Header.js

 import React, { Component } from "react";
    import ReactDOM from "react-dom";
    class MainHeader extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          logOutShown: false
        };
      }
    render() {
    var guiResult = [];
    if (this.state.logOutShown) {
      guiResult.Push(
        <div className="Login__Overlay__Frame">
          <div className="User__Login__Overlay">
          <div className="Login__Content" tabIndex="1" onFocus={this.alerting.bind(this)} onBlur={this.toggleOverlay.bind(this)}>Signout</div>
          </div>
        </div>
      );
    }

    return (
            <div className="Header__Icon">
              <div className="Icons__Log__In" tabIndex="0" onClick={this.validate.bind(this)} onBlur={this.toggleOverlay.bind(this)}/>
              {guiResult}
            </div>
    );
  }

  toggleOverlay(){
    console.log("toggle overlay");
    this.setState({ logOutShown: false});
  }

  validate() {
    console.log("validate:");
    this.setState(
      {
        logOutShown: true
      }
    );
  }
javascripthtmlreactjsonclickhide
4
user28

Voici un exemple simple, j'utilise React hameçons ici au lieu de classes, mais vous pouvez utiliser des cours aussi ..

La partie principale est l'ONCLICK sur le conteneur DIV, si vous exécutez l'exemple ci-dessous et cliquez sur la boîte de dialogue, il ne la fermera pas, mais en cliquant sur la superposition.

Le e.stopPropagation() sur le conteneur DIV est ce qui empêche les événements du contenu de tirer les événements sur la superposition. Au lieu d'utiliser stopPropagation, une autre option vérifie la vérification target & currentTarget à l'intérieur de la superposition onclay ..

const {useState} = React;


function Overlay(props) {
  const {contents} = props;
  const [open, setOpen] = useState(true);
  if (open) {
    return <div className="overlay" onClick={() => setOpen(false)}>
      <div onClick={(e) => {
        //stop clicks getting to the overlay
        e.stopPropagation();
      }}className="overlay-container">
        {contents()}
      </div>
    </div>
  }
  return null;
}


ReactDOM.render(<React.Fragment>
  This is some content to overlay.<br/>
  for testing..
  <Overlay contents={() =>
    <div>This is the contents, clicking here wont effect ovelay</div>
  }/>
</React.Fragment>, document.querySelector('#mount'));
.overlay {
  position: fixed;
  background-color: rgba(100,100,100,0.5);
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.overlay-container {
  border: 1px solid black;
  background-color: white;
  position: absolute;
  top: 30px;
  left: 30px;
  width: 200px;
  height: 80px;
  padding: 5px;
}
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="mount"></div>
4
Keith

Vous pouvez utiliser une bibliothèque bien écrite comme celle-ci: réagissant-wind-clic-manutention

exemple:

import OutsideClickHandler from 'react-outside-click-handler';

function MyComponent() {
  return (
    <OutsideClickHandler
      onOutsideClick={() => {
        alert('You clicked outside of this component!!!');
      }}
    >
      Hello World
    </OutsideClickHandler>
  );
}
3
Kornflexx

Utilisez réagir des réfs https://reactjs.org/docs/refs-and-thodom.html#createing-refs

Vous vérifiez le target de l'événement et utilisez-le sur show/hide le bouton Signout.

ajouter un auditeur d'événements lorsque le composant est monté.

componentWillMount() { document.addEventListener("click", this.handleClickOutside, false); }

supprimer l'auditeur d'événements lorsque le composant est monté.

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

faire le chèque de l'extérieur cliquez sur quelque chose comme ça

handleClickOutside(e) {
    if(this.submitPopoverRef.contains(e.target)) {
        // the click happened in the component
        // code to handle the submit button
        // submit();
        return;
    } 

    // click happened outside the component
    // hide the popover
    this.handleClick(); // set the state false
}

<div ref={node => this.submitPopoverRef = node}> 
... Your code here...

</div>
3
sachin kalekar

Basé sur la réponse de @ Keith: en utilisant React crochets ainsi que des classes: En supposant un parent et des plats enfants, où vous souhaitez que le parent div soit gérer le clic uniquement lorsque le clic n'était pas à l'intérieur du Enfant Div:

const clickedParent = () => {};
const clickedChild = () => {};
<div onClick={clickedParent}>
  <div className="selc-hd-so-remove" onClick={e=> { e.stopPropagation(); clickedChild(); }} > Child Div Clicked</div>
</div>
Parent Div Clicked
</div>
0
iharel