Блог

Могу ли я при нажатии на внутренний щелчок сделать так, чтобы верхний щелчок не работал? У меня есть всплывающее окно, которое находится внутри блока при щелчке, по которому оно открывается. Поэтому мне нужно реализовать эту логику, чтобы закрыть его.

 import React, {Component} from 'react';

class Test extends Component {

  onClick() {
    console.log(111)
    // I need when click onClick1 this not trigger
    // open popup
  }

  onClick1() {
    console.log(222)

    // close popup
  }

  render() {
    return (
      <div>
        <div onClick={this.onClick.bind(this)}>

          tatatata
          <div onClick={this.onClick1.bind(this)}>vavavavava</div>

        </div>
      </div>
    );
  }
}

export default Test;
  

Вы можете использовать stopPropagation метод для события onClick1 , переданного обработчику события, чтобы остановить его передачу другим элементам.

 class Test extends React.Component {
  onClick() {
    console.log(111);
  }

  onClick1(event) {
    event.stopPropagation();
    console.log(222);
  }

  render() {
    return (
      <div>
        <div onClick={this.onClick.bind(this)}>
          tatatata
          <div onClick={this.onClick1.bind(this)}>vavavavava</div>
        </div>
      </div>
    );
  }
}

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

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>