onPress関数の処理方法react

Question

NativeBaseコンポーネントと反応ネイティブを使用していますが、私の_doStuff関数の呼び出しに問題があります。私は

onPress={this._doStuff.bind(this)} 

を呼び出すが、

を受信し続けることを試みた適切

未定義

_doStuff(){ 
console.log('Hi'); 
    } 

_getList() { 
return this.state.listData.map(function(data, i){ 
return(

    <View key={i}> 
    <ListItem style={styles.listItemContain}> 
    <Button transparent onPress={this._doStuff.bind(this)}> 

    <View> 
    <Thumbnail source={{uri: data.icon}} style={styles.thumbnailStyle}/> 
    <Text style={styles.title}>{data.name}</Text> 
    <Text note style={styles.text}>{data.vicinity}</Text> 
    </View> 
     </Button> 

    </ListItem> 
    </View> 

); 
}); 

Answer 1

コンテキストは.MAPループ内に失われます。 ES6を使用している場合は、太い矢印の機能を以下のように使用してみてください。

_getList() { 
 
return this.state.listData.map((data, i) => { 
 
return(
 

 
    <View key={i}> 
 
    <ListItem style={styles.listItemContain}> 
 
    <Button transparent onPress={this._doStuff.bind(this)}> 
 

 
    <View> 
 
    <Thumbnail source={{uri: data.icon}} style={styles.thumbnailStyle}/> 
 
    <Text style={styles.title}>{data.name}</Text> 
 
    <Text note style={styles.text}>{data.vicinity}</Text> 
 
    </View> 
 
     </Button> 
 

 
    </ListItem> 
 
    </View> 
 

 
); 
 
});

あなたは...以下に示すように別のアプローチ（古い学校）を使用する様々な理由により、プロジェクトに

_getList() { 
 
return this.state.listData.map(function(data, i){ 
 
var that = this; 
 
return(
 

 
    <View key={i}> 
 
    <ListItem style={styles.listItemContain}> 
 
    <Button transparent onPress={that._doStuff.bind(that)}> 
 

 
    <View> 
 
    <Thumbnail source={{uri: data.icon}} style={styles.thumbnailStyle}/> 
 
    <Text style={styles.title}>{data.name}</Text> 
 
    <Text note style={styles.text}>{data.vicinity}</Text> 
 
    </View> 
 
     </Button> 
 

 
    </ListItem> 
 
    </View> 
 

 
); 
 
});

Answer 2

の「doStuff」を読み取ることができません私はあなたの_getList機能のコンテキストがないという賭けになるだろうあなたが考えている反応成分の文脈を持たない。 ES6クラスを使用していて、コンポーネントコンテキストの自動バインドを取得したい場合は、autobind-decoratorを使用することをお勧めします。あなたがそのルートに行くことを決めたら、a nice tutorial on setting it upです。

_getListに電話するときは、.callまたは.bindのいずれかで電話してください。例えば

：

// if you are calling the function directly this._getList().call(this)

又は

// if you are passing the function off for another function to execute it this._getList.bind(this)

this