时间戳

首页 > 解决方案 > 在多层组件的情况下如何纠正事件传播

react-native - 在多层组件的情况下如何纠正事件传播

问题描述

我有 2 个 View 组件使用绝对定位相互渲染。两个视图都使用 TouchableOpacity 绑定了 onPress 事件。现在，当我按下顶视图时，实际上触发了视图 onPress 事件，并且顶部的视图保持原样。我在这里做错了什么？

顶层代码

<TouchableOpacity style={cell} onPress={this.handleMessangerPress}>
     <Image style={[filterImage, {marginLeft: 20}]} source={{ uri: imagePath + 'messanger.png' }} />
</TouchableOpacity>

底层代码

<TouchableOpacity style={styles.subTotal} onPress={this.handleSubTotalPress}>
    <View>
       <Text style={styles.text}>{'Subtotal Rs.' + total}</Text>
    </View>
</TouchableOpacity>

在上述情况下，handleSubTotalPress 被调用来代替 handleMessangerPress

标签： react-native

解决方案

使用这种方式

<TouchableOpacity style={styles.subTotal} onPress={()=> this.handleSubTotalPress() }>

或者

<TouchableOpacity style={styles.subTotal} onPress={this.handleSubTotalPress.bind(this) }>

推荐阅读