var Restaurant = React.createClass({
resPress: function (resId, resName) {
this.props.navigator.push({
name: 'viewMenu',
id: resId,
placeName: resName
});
},
render: function () {
var that = this;
return (
<View>
{this.state.place.map((item, i) => (<TouchableOpacity key={i} onPress={() => this.resPress(item.res_id, item.res_name)} ><Text>{item.res_name}</Text></TouchableOpacity>))}
</View>
)
}
});
This works perfectly fine. My question is why cant I just pass the values to the 'resPress' like mentioned below?
onPress={this.resPress(item.delivery_id, item.place_name)}
You cannot call a function in render method, you can only pass a function as prop. for doing this there are two ways, 1. Using .bind
, 2. Using arrow functions:
<TouchableOpacity onPress={this.resPress.bind(this, yourData)} ><Text>{item.res_name}</Text></TouchableOpacity>
<TouchableOpacity onPress={() => this.resPress(yourData)} ><Text>{item.res_name}</Text></TouchableOpacity>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.