javascript - react native 中多个元素如何公用一个事件

问题描述

问 题

例如

<TouchableOpacity style={styles.navIcon} onPress={this._onPress} index={2}>
...
<TouchableOpacity style={styles.navIcon} onPress={this._onPress} index={3}>
<TouchableOpacity style={styles.navIcon} onPress={this._onPress} index={4}>
...

函数部分

_onPress(){
  var navigator = this.props.navigator;
  navigator.push({
    name: 'Scene 2',
    index: 2,
  });
}

因为ECMA5写法下，createclass会把所有的事件this全指向大组件，也就是说onPress的写法并没有错误，但是这里如何可以拿到index=2/3/4这个值呢，因为为了拿navigator（navigator是大组件的属性，也就是NavigateBar的属性，所以也没有错），this的指针已经变了。

解决方案

首先，给TouchableOpacity提供style属性是给瞎子点灯，它不需要也用不上这个属性!你提供了只是毫无用处地增加程序内存消耗。
其次，每一个可触摸组件应当对应一个不同的触摸事件处理函数。多个可触摸组件使用同一个触摸事件处理函数是一个不推荐的方法。你可以通过带不同参数在触摸事件处理函数中实现对不同的触摸事件的区别。但这并不能减少你的开发代码量。只会让你有一个比较大的处理函数，而不是比较小的多个处理函数。如果使用推荐的，每一个可触摸组件应当对应一个不同的触摸事件处理函数的做法，你的问题就不存在了。

如果实在要做，也是可以做的，做法是：

<TouchableOpacity onPress={()=>this._onPress('Scene 2',2)}>
...
<TouchableOpacity onPress={()=>this._onPress('Scene 3',3)}>
<TouchableOpacity onPress={()=>this._onPress('Scene 4',4)}>

_onPress:function(aSceneName,aIndexNumber){
  this.props.navigator.push({
    name: aSceneName,
    index: aIndexNumber
  });
}

这篇关于javascript - react native 中多个元素如何公用一个事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！