如何将组件引用传递给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> 

我也尝试着我作为参数传递。它不起作用，因为它在迭代结束后具有值。基本上它具有比赛价值。

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 rowPressed函数的上下文，如您所期望的那样，从而使您的代码正常工作。

另外，为了摆脱警告信息，您应该为每个<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> 
    ); 
} 

干杯