在子级onClick外部单击时隐藏分区Div | ReactJS

constructor(props) {
  super(props);
  this.state = {
    showDiv: true
  };
}

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

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

handleClickOutside = (event) => {
  const div = this.refs.div; // 获取分区Div的引用
  if (div && !div.contains(event.target)) {
    this.setState({ showDiv: false }); // 点击分区Div外部时隐藏分区Div
  }
}

render() {
  return (
    <div>
      {this.state.showDiv && <div ref="div">分区Div内容</div>}
      <button onClick={() => this.setState({ showDiv: true })}>显示分区Div</button>
    </div>
  );
}