React中属性ref返回null

Question

尝试在react中获取对DOM元素的引用返回null，我使用了选择器方法，并且ref都返回了null。在创建下拉列表时，这些代码可以正常工作，但问题是：

当我第二次单击文档或按钮时，收到一条错误消息，提示this.containerElem is null。

任何帮助将不胜感激。

这是我的代码

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class DropdownMenu extends React.Component {
  constructor() {
    super();
    this.state = {
      isToggle: false,
    };
  }

  handleClick(e) {
    e.preventDefault();
    this.setState({
      isToggle: !this.state.isToggle,
    }, () => document.addEventListener('click', this.closeMenu.bind(this))
    );
  }

  closeMenu(ev) {
    if (!this.containerElem.contains(ev.target)) {
      this.setState({
        isToggle: !this.state.isToggle
      }, () => document.removeEventListener('click', this.closeMenu))
    }
  }

  render() {
    return (
      <div>
        <ClickBtn onHandleClick={this.handleClick.bind(this)} />
        {
          (this.state.isToggle) ? (
            <div className="menu"
              ref={(node) => {
                this.containerElem = node;
              }}
            >
              <button>Menu Item 1</button>
              <button>Menu Item 1</button>
              <button>Menu Item 1</button>
            </div>
          ) :
            (
              null
            )
        }
      </div>
    )
  }
}


function ClickBtn(props) {
  return (
    <button type="button" onClick={props.onHandleClick}>Click to Toggle</button>
  )
}

ReactDOM.render(
  <DropdownMenu />, document.getElementById('root')
);