es6箭头功能，在React应用中未获取参数值

Question

Hi I have been trying to pass values to es6 arrow function in my React app, but not successful so far. Here is what I am doing

var data = [];
for (var i=1; i<=5; i++) {
  data.push(<li><a href="#" onClick={(e) => this.getData(e, i)} >{i}</a></li>);
}

and code for getData is

getData (e, page){
 e.preventDefault();
 //here I am calling an api to get data as per page params
}

but actually when the click happens i get nothing. Any help!

Answer 1

I have tested this code. It works ok - getData method is invoked when I click a link.

You just need to change var to let to get right value of i param.

var data = [];
for (let i=1; i<=5; i++) {
  data.push(<li><a href="#" onClick={(e) => this.getData(e, i)} >{i}</a></li>);
}

Answer 2

try this:

var data = [];
for (var i=1; i<=5; i++) {
  data.push(<li><a href="#" onClick={this.getData.bind(this, i)}>{i}
    </a></li>);
}

Here is a working example: http://jsbin.com/lokafas/edit?html,js,console,output

By the way, I also recommend using let and const when you use ES6 syntax anyways.

Answer 3

You have to bind this somewhere in order for your code to work. Best way is to do it in the constructor:

export default class SomeCoolName extends React.Component {

   constructor() {
      super();
      this.getData = this.getData.bind(this); // this is important!
   }

   getData(e, page) {
      // code
   }


   // somewhere in the code, in render() maybe
   var data = [];
   for (var i=1; i<=5; i++) {
      data.push(<li><a href="#" onClick={(e) => this.getData(e, i)} >{i}</a></li>);
   }

}