Question

我已经构建了一个React组件，我有一个按钮列表，这些按钮将基于http调用填充，以吸引更多的客户，并且它为每个客户创建一个按钮以检索有关该客户的详细信息。这是我到目前为止的内容：

export default class CustomerList extends React.Component {

  baseUrl = 'http://localhost/RevLocal.Operations.WebApi/api/';    

  getBillingAccounts = event =>  {
    event.preventDefault();
    alert('This is not working!');  
  }

  render() {
    var customers = [];
    if (this.props.customerList.map) {
        customers = this.props.customerList.map(function (c) {
            return <li className="list-group" key={c.id}>
                <button style={buttonStyle} className="btn btn-primary btn-block" onClick={this.getBillingAccounts}>
                    {c.id}-{c.companyName}
                </button>
            </li>
        });
    } else {
        customers = <li><h3>No customers found!</h3></li>
    }
    return (
        <ul style={{ list_style: 'none' }} className="list-group">
            {customers}
        </ul>
    );
  }
}

我尝试了几种不同的方法：我添加了一个构造函数并试图绑定该函数，并且我尝试了内联绑定，但都没有用。我希望有人能用新的眼光看一下并解释发生了什么。预先感谢。

Answer 1

我认为this的范围存在问题。更改此行：

this.props.customerList.map(function (c) {

对此：

this.props.customerList.map((c) => {

React OnClick函数不会绑定，并且“ this”仍然显示未定义

1 个答案: