Javascript 无法从onClick-in-React调用函数

我在组件中有一个如下所示的渲染：

  render() {
    if (!this.props.authorities) {
      return <div>Loading...</div>
    }

        return (
          <div>
            <Col xsOffset={0.5} md={2}>
              <ButtonGroup Col xsOffset={1} md={4} justified centered>
                <DropdownButton title="Authority" id="bg-justified-dropdown">
                  {this.props.authorities.map(this.renderAuthority)}
                </DropdownButton>
              </ButtonGroup>
            </Col>
          </div>
        )
      }
    }

  renderAuthority(authorityData) {
    return (
      <MenuItem onClick={this.clickAuthority(authorityData.LocalAuthorityId)} key={authorityData.LocalAuthorityId} eventKey={authorityData.LocalAuthorityId}>{authorityData.Name}</MenuItem>
    )
  }

  constructor(props) {
    super(props);
    this.clickAuthority = this.clickAuthority.bind(this);
  }

我的构造函数也如下所示：

  render() {
    if (!this.props.authorities) {
      return <div>Loading...</div>
    }

        return (
          <div>
            <Col xsOffset={0.5} md={2}>
              <ButtonGroup Col xsOffset={1} md={4} justified centered>
                <DropdownButton title="Authority" id="bg-justified-dropdown">
                  {this.props.authorities.map(this.renderAuthority)}
                </DropdownButton>
              </ButtonGroup>
            </Col>
          </div>
        )
      }
    }

  renderAuthority(authorityData) {
    return (
      <MenuItem onClick={this.clickAuthority(authorityData.LocalAuthorityId)} key={authorityData.LocalAuthorityId} eventKey={authorityData.LocalAuthorityId}>{authorityData.Name}</MenuItem>
    )
  }

  constructor(props) {
    super(props);
    this.clickAuthority = this.clickAuthority.bind(this);
  }

但是，我发现以下错误：

Unhandled Rejection (TypeError): Cannot read property 'clickAuthority' of undefined

这引用了菜单项onClick。知道我做错了什么以及如何修复吗？

默认情况下，

.map（）

函数将回调与全局环境对象绑定。因此，在构造函数中将

this.renderAuthority

函数与

this

绑定

constructor(props) {
  super(props);
  this.renderAuthority = this.renderAuthority.bind(this);
  this.clickAuthority = this.clickAuthority.bind(this);
}

第二，当你写作时：

onClick={this.clickAuthority(authorityData.LocalAuthorityId)}

您立即调用该函数并将其返回到

onClick

属性。你必须做到：

onClick={() => this.clickAuthority(authorityData.LocalAuthorityId)}

---

为什么不试试{this.props.authorities.map（this.renderAuthority.bind（this）}