2016-10-13 12 views
0

나는 함수의 범위에 대해 머리를 쓰려고한다. _internalFunction은 정상적으로 작동하지만 대신 _externalFunction으로 전화를 걸려면 어떻게해야합니까?React 네이티브 함수 범위 (하위 함수에서 부모 함수 호출)

self=this을 시도한 다음 _renderRow 내부에서 this._externalFunction을 시도했으며 () => {this._externalFunction}을 시도했지만 작동하지 않았습니다. 사전에 https://rnplay.org/apps/5CIGvA

감사 : 여기에 기본 놀이터 바이올린 반응에 코드의

class sandbox extends Component { 
    //some code removed for clarity 

    _renderRow(item) { 
     const _internalFunction =() => { 
     Alert.alert('Internal'); 
     }; 
     return (<Text onPress={_internalFunction}>{item}</Text>); 
    } 

    _externalFunction() { 
     Alert.alert('External'); 
    }; 
} 

! :)

답변

0

ES6에서는 수동으로 this을 인스턴스에 바인딩해야합니다. 여기 React documentation에서 인용 한 것입니다 : ES6 클래스로 선언

에서 반응 구성 요소, 방법은 일반 ES6 클래스와 같은 의미를 따릅니다. 즉, 은 인스턴스에 this을 자동으로 바인딩하지 않습니다.

따라서 당신이 생성자 함수를 결합해야합니다 :

constructor() { 
    super(); 
    this._externalFunction = this._externalFunction.bind(this); 
} 

을 그리고 당신이 당신의 구성 요소에 this._externalFunction를 사용할 수 있습니다

_renderRow(item) { 
    return (<Text onPress={this._externalFunction}>{item}</Text>); 
} 
당신은 생성자에서 사용 .bind(this) 명시 적으로 해야합니다
+1

나는 이것을 할 수있는 또 다른 방법을 화살표 키 기능을 사용하여 추가하고 싶습니다. '_renderRow = (item) => {return()}' 어휘 바인딩으로 인해 작동합니다. 나는이 생성자에서 모든 것을 수동으로 바인딩하는 것보다 좀 더 깔끔하다는 것을 알았다. – steezeburger

+0

흠 .. 내가 주 회신문에서 제안 된 것을 정확히했을 때 제대로 작동하지 않았다. 클릭하면 아무런 반응이 없습니다. 그러나 위의 주석에있는 내용은 return ( {item});}과 완벽하게 작동했습니다.}}이 대답을 받아 들여야하는 이유는, 나를 위해 일한다. 나는 네가 쓴 것처럼 내가 그랬다고 확신한다. – Niclas

+0

대신 소품에서 바인딩을 시도 할 수 있습니까? {item}

관련 문제