コンポーネントリファレンスをonPressコールバックに渡すにはどうすればいいですか？

Question

次のような種類のリストをonPressの "handler"でレンダリングしました。

私が押されたレースの参照を取得することはできませんので、たonPressハンドラは無用であることを実現しています。私はrefが定義されていないエラーを取得します。

var races = Engine.possibleRaces; 

function racePressed(ref) { 
    console.log("REF: " + ref); // is never called 
} 

var races = Engine.possibleRaces; 
var rowViews = []; 
for (var i = 0; i < races.length; i++) { 
    rowViews.push(
    <Text 
     ref={i} 
     onPress={() => racePressed(ref)} // ref is not defined 
     style={styles.raceText}>{races[i].text} 
    </Text> 

); 
} 

<View style={{width: Screen.width, flexDirection:'row', flexWrap: 'wrap', alignItems: "center"}}> 
     {rowViews} 
</View> 

私はパラメータとしてiも渡そうとしました。それは反復が終わった後の値を持っているので、うまくいきませんでした。基本的にそれはraces.length値を持っています。

onPress={() => racePressed(i)} // Same as races.length 

編集：

私はプログラムを次のように問題を特定しました。

'use strict'; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

let texts = [{text: "Click wrapper text1"}, {text: "Click wrapper text2"}]; 

class sandbox extends Component { 

    rowPressed(ref, i) { 
    console.log("rowPressed: " + ref + " " + i) 
    } 

    render() { 

    var rows = []; 

    for (var i = 0; i < texts.length; i++) { 
     rows.push(
     <Text 
      ref={i} 
      onPress={() => this.rowPressed.bind(this, i)} 
      style={styles.raceText}>{texts[i].text} 
     </Text> 
    ); 
    } 

    return (
     <View style={styles.container}> 

     <View> 
      {rows} 
     </View> 

     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center' 
    } 
}); 

AppRegistry.registerComponent('sandbox',() => sandbox); 

コールバックが呼び出されると、エラーが警告

[tid:com.facebook.React.JavaScript] Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `sandbox`. See https://fb.me/react-warning-keys for more information. 

Answer 1

をあなたはコンストラクタでその関数をバインドします。

constructor(props){ 
    super(props); 
    //your codes .... 

    this.rowPressed = this.rowPressed.bind(this); 
} 

これは、期待通りにコードが正しく動作するように、rowPressed関数のコンテキストをバインドします。

また、警告メッセージを取り除くには、各要素に一意のkeyプロパティを指定する必要があります。コード内の<Text key={i} ....>を使用すると効果があります。

Answer 2

を以下を除いてスローされないされていない私は、似た何かをしようとすると、この解決策が見つかりました：私はお勧め

render() { 
    var _data = texts; 
    return (
     <View style={styles.container}> 
     { _data.map(function(object,i) { 
      return (
       <Text ref={i} 
        onPress={() => this.rowPressed(i)} 
        style={styles.raceText}>{texts[i].text} 
       </Text>); 
      }) 
     } 
     </View> 
    ); 
} 

乾杯