es6 arrow function, React app에서 param 값을 가져 오지 않았습니다.

Question

안녕하세요, 저는 React 앱에서 es6 arrow function에 값을 전달하려했지만 성공하지 못했습니다. 여기에 내가 GetData의에 대한

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

코드입니다 뭐하는 거지입니다

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

실제로 클릭이 내가 아무것도 얻을 발생합니다. 어떤 도움이라도!

Answer 1

이 코드를 테스트했습니다. 괜찮아요 - getData 메소드는 링크를 클릭 할 때 호출됩니다.

i param 값을 얻으려면 var에서 let으로 변경하면됩니다.

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

이 시도 :

여기

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

가 작동 예입니다 그런데 http://jsbin.com/lokafas/edit?html,js,console,output

, 나는 또한 당신이 어쨌든 ES6 구문을 사용할 때 let 및 const를 사용하는 것이 좋습니다.

Answer 3

당신은 당신의 코드가 작동하기 위해서는 어딘가 this을 결합해야합니다. 가장 좋은 방법은 생성자에서 그것을 할 수 있습니다 :

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

}