当我尝试在React中隐藏组件时，我的参考是未定义的

Question

我正在使用React-Bootstrap组件（包括OverlayTrigger组件）在React中构建一个应用程序。

当我尝试在OverlayTrigger组件中调用函数时，我收到错误。 hide()函数存在于OverlayTrigger组件中，之前我做过类似的事情（并且工作正常）。我很难调试这个。

这是我得到的错误：

TypeError: Cannot read property 'hide' of undefined
    at React.createClass.closeOverlay (TaskStatusIcon.jsx:7)

这是实际的代码：

TaskStatusIcon = React.createClass({
  propTypes: {
      task: React.PropTypes.object,
  },

  closeOverlay() {
    this.refs.overlayTrigger.hide();  // THIS IS THE PROBLEM
  },

  handlePopoverClick(status) {
    Actions.tasks.setStatus.bind(null, this.props.task, status);
    this.closeOverlay();
  },

  renderOverlay() {
    return (
      <Popover title="Mark as...">
        <div onClick={this.handlePopoverClick(TASK.INCOMPLETE)}>Incomplete</div>
        <div onClick={this.handlePopoverClick(TASK.IN_PROGRESS)}>In Progress</div>
        <div onClick={this.handlePopoverClick(TASK.DONE)}>Done</div>
      </Popover>
    );
  },

  render() {
    let imgSrc = "/icon1.jpg";
    return (
      <OverlayTrigger ref="overlayTrigger" trigger="click" rootClose placement="bottom" overlay={this.renderOverlay()}>
        <a href="#" style={{display:'inline-table'}}>
          <div>
            <img src={imgSrc} className='img-circle' />
          </div>
        </a>
      </OverlayTrigger>
    );
  }
});