Question

//这是我的Code All Working但是当我尝试用它添加onClick函数时，我得到的错误是this.getComponent不是函数

var NavMenu = React.createClass({
        getComponent: function(index) {
            console.log("Bingo");
        },
        render: function()
        {
            if (this.props.data.length != 0)
            {   

                return (
                    <div className="dropdown pad_right">
                        <button className="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">{this.props.name}
                        <span className={this.props.icon}></span></button>
                        <ul className="dropdown-menu">
                          {this.props.data.map(function(name){
                                if(name.isHeader) {
                                   return  <li onClick={this.getComponent.bind(this, 1)}><a>{name.key}</a></li>;
                                }else {
                                    return <li className="dropdown-header">{name.key}</li> 
                                }
                          })}
                        </ul>
                  </div>
                );
            }

        }
    });

Answer 1

使用React.createClass时，您不需要绑定函数，react会自动处理它。如果要将自己的参数传递给函数，可以执行以下操作：

<li onClick={(event) => this.getComponent(1)}>
  <a>{name.key}</a>
</li>

此外，由于您在循环中调用此函数，可能会导致此错误，因为类的范围丢失，您可以尝试这样做：

{this.props.data.map((name) => {
  if(name.isHeader) {
    return  <li onClick={(event) => this.getComponent(1)}><a>{name.key}</a></li>;
  }else {
    return <li className="dropdown-header">{name.key}</li> 
  }
})}

箭头函数(name) => ...将函数范围绑定到类范围

在React.CreateClass中绑定onClick函数

1 个答案: