Cannot get 'this' in <ListView> renderRow function #967
Description
I wrote a function called renderMyRow to render rows in a ListView, but I found it is strange that I can't get this in this function.
Then I fixed it by add a bind(this) in my code, but i wonder why i cannot get 'this' in my renderMyRow ?
here is the code
class SearchResult extends Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource({
rowHasChanged: (r1,r2) => r1.guid !== r2.guid
});
this.state = {
dataSource: dataSource.cloneWithRows(this.props.listings)
};
}
render() {
return (
<ListView dataSource={this.state.dataSource} renderRow={this.renderMyRow} />
)
}
rowPressed(propertyGuid) {
var property = this.props.listings.filter(prop => prop.guid === propertyGuid)[0];
this.props.navigator.push({
title: 'Property',
component: PropertyView,
props: {property: property}
})
}
renderMyRow(rowData, sectionID, rowID) {
console.log(this); // Output: null
var price = rowData.price_formatted.split(' ')[0];
return(
<TouchableHighlight underlayColor='#DDDDDD' onPress={ () => this.rowPressed(rowData.guid) }>
<View>
<View style={styles.rowContainer}>
<Image style={styles.thumb} source={{uri : rowData.img_url}}/>
<View style={styles.textContainer}>
<Text style={styles.price}>£{price}</Text>
<Text numberOfLines={1}>{rowData.title}</Text>
</View>
</View>
<View style={styles.separator}/>
</View>
</TouchableHighlight>
);
}
}