React实现点击组件外区域隐藏组件

React实现类似antd中Modal组件点击Modal组件以外区域隐藏Modal效果

Tips

ReactDOM.findDOMNode(ReactComponent)

获取已渲染到DOM中的组件

Element.conatains(Element)

判断一个元素是否在另一个元素中

Code

import React, { Component } from 'react';
import ReactDOM from 'react-dom'

class Modal extends Component {
  state = {
    isActive: false,
    isMounted: false
  }
  componentDidMount() {
    this.setState({
      isMounted: true
    })
  }

  componentDidUpdate(prevProps, prevState) {
    if (!prevState.isActive && this.state.isActive) {
      document.addEventListener('click', this.hideModal)
    }
    if (prevState.isActive && !this.state.isActive) {
      document.removeEventListener('click', this.hideModal)
    }
  }

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

  hideModal = (e) => {
    if (!this.state.isMounted) return false
    const node = ReactDOM.findDOMNode(this)
    const target = e.target || e.srcElement
    const isInside = node.contains(target)

    if (this.state.isActive && !isInside) {
      this.setState({
        isActive: false
      })
    }
  }

  showModal = () => {
    this.setState({
      isActive: true
    })
  }

  render() {
    return (
      <div>
        {this.state.isActive && <div>Modal</div>}
        <button onClick={this.showModal}>showModal</button>
      </div>
    );
  }
}

export default Modal;