在块内单击时，将触发外部单击

Question

我可以在单击内部单击时这样做，以使顶部单击不起作用吗？ 我有一个弹出窗口，单击该弹出窗口即位于该块内部。因此，我需要实现此逻辑以将其关闭。

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;

Answer 1

您可以在赋予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>