我确实使用onPress“handler”呈现了以下类型的列表.
原文链接:https://www.f2er.com/react/301288.html我已经意识到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.