陣營本地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功能

回答

相關問題