2016-02-03 3 views
0

Я пытаюсь вызвать простую функцию, когда строка нажата в ListView.ReactNative это значение возвращает значение в renderRow ListView

Проблема заключается в том, this возвращается в render функции Constructor, в то время как this в renderRowDedicatedWorkerGlobalScope возвращается.

Таким образом, я получаю ошибку _this2._onPress is not a function.

Вот мой весь класс.

/** 
* Galleries 
*/ 
'use strict'; 

import React, { PropTypes } from 'react-native' 
var { 
    ListView, 
    ScrollView, 
    StyleSheet, 
    Text, 
    TouchableNativeFeedback, 
    View, 
} = React; 

import GLOBAL from '../FtGlobals'; 
import GalleryThumb from './GalleryThumb'; 

/** 
* Styles 
*/ 
var styles = StyleSheet.create({ 
    list: { 
    justifyContent: 'center', 
    flexDirection: 'row', 
    flexWrap: 'wrap', 
    }, 
}); 

/** 
* Module 
*/ 
var Galleries = React.createClass({ 
    /** 
    * States 
    */ 
    componentDidMount: function() { 
    this._data = []; 
    this.loadNextPage(); 
    }, 

    getInitialState: function() { 
    return { 
     dataSource: new ListView.DataSource({ 
     rowHasChanged: (r1, r2) => r1 !== r2 
     }), 

     canLoadMore: true, 
     isLoadingContent: false, 
    }; 
    }, 

    updateDataSource: function(data){ 
    this._data = this._data.concat(data); 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this._data), 
     isLoadingContent: false, 
    }) 
    }, 

    loadNextPage: function(){ 
    if (this.state.isLoadingContent) { 
     return; 
    } 

    this.setState({ 
     isLoadingContent: true, 
    }); 

    console.log('fetching galleries'); 
    var url = GLOBAL.API_BASE+'/gallery/list-json'; 

    fetch(url) 
     .then(res => res.json()) 
     .then(res => this.updateDataSource(res)) 
    }, 

    _onPress: function(){ 
    console.log('test'); 
    }, 

    /** 
    * Post 
    */ 
    _renderRow: (gallery) => { 

    console.log(this._onPress); // returns undefined 

    var url = GLOBAL.DYNAMIC_IMG_BASE+'/150x150/'+gallery.cover; 
    var title = gallery.title_en; 
    return (
     <TouchableNativeFeedback 
      onPress={() => this._onPress()} 
      background={TouchableNativeFeedback.Ripple()}> 
     <View> 
      <GalleryThumb url={url} title={title} /> 
     </View> 
     </TouchableNativeFeedback> 
    ) 
    }, 

    /** 
    * Render 
    */ 
    render() { 

    console.log(this._onPress); // returns function 

    return (
     <ListView contentContainerStyle={styles.list} 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     pageSize={100} 
     /> 
    ) 
    } 
}) 

module.exports = Galleries 

Спасибо.

ответ

2

Try письма renderRow как это:

_renderRow: function(gallery) { 
    console.log(this._onPress); 
    ... 
}, 

Или так:

_renderRow(gallery) { 
    console.log(this._onPress); 
    ... 
}, 
+0

Почему такая разница? В моем понимании '() => {}' является чисто синтаксическим сахаром 'function()' –

+0

@YANGLei Посмотрите на https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions (раздел «Функции стрелок, используемые как методы»). Функции Arrow не являются синтаксическим сахаром для 'function', так как они не связывают' this'. – martinarroyo