Javascript 当我试图在React中隐藏组件时，我的Ref未定义

我正在使用React引导组件（包括OverlyTrigger组件）构建React应用程序

当我试图调用OverlyTrigger组件中的函数时，我在加载时遇到了一个错误。

hide（）

函数存在于OverlyTrigger组件中，我以前也做过类似的事情（它工作得很好）。我很难调试这个

这就是我得到的错误：

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>
    );
  }
});

TaskStatusIcon=React.createClass({
道具类型：{
任务：React.PropTypes.object，
},
closeOverlay（）{
this.refs.overlayTrigger.hide（）；//这就是问题所在
},
HandlePooverClick（状态）{
Actions.tasks.setStatus.bind（null，this.props.task，status）；
这个.closeOverlay（）；
},
renderverlay（）{
返回(
残缺的
进行中
多恩
);
},
render（）{
让imgSrc=“/icon1.jpg”；
返回(
);
}
});

问题在于您正在立即调用事件处理程序，而不是向它们传递引用。你想要的是

onClick={foo}

，而不是

onClick={foo（）}

@FelixKling啊，我明白了。事实上，当我用

{foo}

而不是

{foo（）}

时，问题就消失了。但是我如何传递用户当时单击的内容的特定信息呢？您可以将该信息作为

数据-

属性添加到元素中，并从

事件.target中读取。谢谢！成功了。