ऑनप्रेस कॉलबैक के घटक संदर्भ को कैसे पास किया जाए?

Question

मैंने ऑनप्रेस "हैंडलर" के साथ निम्नलिखित प्रकार की सूची प्रस्तुत की।

मुझे एहसास हुआ है कि onPress हैंडलर बेकार है क्योंकि मैं दबाया जाति के संदर्भ नहीं मिल सकता है। मुझे रेफरी परिभाषित त्रुटि नहीं है।

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> 

मैंने भी पैरामीटर के रूप में पास करने का प्रयास किया। यह काम नहीं करता है, क्योंकि इसके पुनरावृत्ति के बाद मूल्य होता है। असल में इसकी दौड़ होती है। लम्बाई मान।

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

यह this पंक्तिरोधित फ़ंक्शन का संदर्भ देता है जैसा कि आप उम्मीद करते हैं, जिससे आपका कोड ठीक से काम करता है।

इसके अलावा, चेतावनी संदेशों से छुटकारा पाने के लिए आपको प्रत्येक <Text> तत्व के लिए अद्वितीय 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> 
    ); 
} 

चीयर्स