阵营本地TouchableHighlit OnPress功能

我有可折叠的列表视图，每一个项目是一个touchablehighlight，每当用户点击他们，我需要用户重定向到另一个页面，其中一些ID（参数，touchablehighlight的id）阵营本地TouchableHighlit OnPress功能

调试和测试的目的，在用户重定向到一个页面之前（我不知道如何做到这一点），首先我试图在控制台中打印ID。但问题在于您点击它的任何按钮，它将打印最后一个项目的ID。（数组中的最后一项）。

任何解决方案？我的错误是什么？

var Accordion = require('react-native-accordion'); 
 

 
class Courses extends Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
     this.state = { 
 
      dataSource: new ListView.DataSource({ 
 
      rowHasChanged: (row1, row2) => row1 !== row2, 
 
      }), 
 
      loaded: false, 
 
     }; 
 
    } 
 

 
    fetchData() { 
 
// fetching data 
 
    } 
 

 
    componentDidMount() { 
 
    this.fetchData(); 
 
    } 
 

 
    render(){ 
 
    if (!this.state.loaded) { 
 
     return this.renderLoadingView(); 
 
    } 
 

 
    return (
 
     <View style={{ 
 
     flex: 1 
 
     }}> 
 
     <ListView 
 
     dataSource={this.state.dataSource} 
 
     renderRow={this.renderRow} 
 
     style={styles.listView} 
 
     /> 
 
     </View> 
 
    ); 
 
    } 
 

 
    renderRow(data) { 
 

 
    var header = (
 
     <View> 
 
      <View style={styles.rowContainer}> 
 
      <View style={styles.textContainer}> 
 
       <Text style={styles.title}>{data.nid}</Text> 
 
       <Text style={styles.description} numberOfLines={0}>{data.title}</Text> 
 
      </View> 
 
      </View> 
 
      <View style={styles.separator}></View> 
 
    </View> 
 
    ); 
 
/////////// 
 
    var content = []; 
 
    for(var x=0; x < Object.keys(data.course).length; x++){ 
 
     var title = data.course[x].title; 
 
     var course_id = data.course[x].course_id; 
 
     content.push(
 
     <TouchableHighlight 
 
     underlayColor='#e3e0d7' 
 
     key={x} 
 
     onPress={() => { 
 
      console.log(title); ///<<<<<< here is the problem >>>>>> 
 
     }} 
 
     style={styles.child} 
 
     > 
 
     <Text style={styles.child}> 
 
     {data.course[x].title} 
 
     </Text> 
 
     </TouchableHighlight> 
 
    ); 
 
    } 
 
    var clist = (
 
     <View style={styles.rowContainer}> 
 
     {content} 
 
     </View> 
 
    ); 
 
//////////// 
 
    return (
 
     <Accordion 
 
     header={header} 
 
     content={clist} 
 
     easing="easeOutCubic" 
 
     /> 
 
    ); 
 
    } 
 

 
    renderLoadingView() { 
 
    return (
 
     <View style={styles.loading}> 
 
     <Text style={styles.loading}> 
 
      Loading Courses, please wait... 
 
     </Text> 
 
     </View> 
 
    ); 
 
    } 
 
} 
 

 
module.exports = Courses;

我试图定义一个函数，就在渲染（）这样的功能：

rowPressed(){ 
    console.log('row pressed'); 
    } 

    render(){ 
    if (!this.state.loaded) { 
     return this.renderLoadingView(); 
    }

我打电话这样说：

var content = []; 
    for(var x=0; x < Object.keys(data.course).length; x++){ 
     var title = data.course[x].title; 
     var course_id = data.course[x].course_id; 
     content.push(
     <TouchableHighlight 
     underlayColor='#e3e0d7' 
     key={x} 
     onPress={() => this.rowPressed() } 
     style={styles.child} 
     > 
     <Text style={styles.child}> 
     {data.course[x].title} 
     </Text> 
     </TouchableHighlight> 
    ); 
    } 
    var clist = (
     <View style={styles.rowContainer}> 
     {content} 
     </View> 
    );

但它给错误：无法读取性能空的“rowPressed”

我尝试添加这构造函数，但它没有，甚至帮助： this.rowPressed = this.rowPressed.bind（本）

也将结合onpress没有帮助：

onPress={() => this.rowPressed().bind(this) }

来源

2016-07-06 Ataomega

看看这个问题：http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example它可能解决您的问题。 –

这里是一个教程做同样的 - https://www.raywenderlich.com/126063/react-native-tutorial – Dlucidone

谢谢纳德，我可以解决它。 – Ataomega

试着这样做：

for(let x=0; x < Object.keys(data.course).length; x++){}

在次做到这一点e renderRow是上面所写的两种方法中的第一种。

这种方式x应该是正确的范围。

来源

2016-07-06 15:17:16

感谢您的回答，但它没有改变任何东西。仍是同样的问题。 – Ataomega

你能详细说明一下吗？ –

其实我可以用你在之前的评论中发布的链接修复它，http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example。感谢它 – Ataomega

阵营本地TouchableHighlit OnPress功能

回答

相关问题