首页 文章

如何检查用户是否在当前组件内单击了？

提问于
浏览 次
8

我有一个名为 Dialog 的组件，其中我在鼠标点击 window 对象时附加了一个事件监听器 .

componentDidMount() {
    document.addEventListener('click', this.handleClick);
}

componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
}

如何检测（在 handleClick 函数中）是否在组件内部或外部触发了单击？请注意，此对话框包含不同的元素和子组件 .

reactjs

1 回答

  • 13

    parent.contains(child) 是你的朋友 . 使用 refs 的此解决方案可能并不完美，但仅使用 this 在此处使用React 15不起作用，因此请记住，在早期版本中，您必须在父级上使用 .getDOMNode() .

    class Dialog extends React.Component {
  constructor() {
    super();
    this.handleClick = this.handleClick.bind(this);
  }
  componentDidMount() {
    document.addEventListener('click', this.handleClick);
  }
  componentWillUnmount() {
    document.removeEventListener('click', this.handleClick);
  }
  handleClick(e) {
    if (this.node.contains(e.target)) {
      console.log('You clicked INSIDE the component.')
    } else {
      console.log('You clicked OUTSIDE the component.')
    }
  }
  render() {
    return(
      <span ref={node => this.node = node}>
        Level 0
    
        <span>
          Level 1.
    
          <span>Level 2.</span>
        </span>
      </span>
    );
  }
}

ReactDOM.render(<Dialog/>, document.getElementById('View'));

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>
    回复于

相关问题