javascript - 如何防止 native react 中的父点击事件？

Question

onParentClick = () => {
  console.log('Parent is triggered');
}

onChildClick = (event) => {
  event.stopPropagation();
  console.log('Child is triggered');
}

<TouchableWithoutFeedback onPress={()=> this.onParentClick()}>
  <View>
    <Text>How to prevent parent click event</Text>
    <TouchableOpacity onPress={(event)=> this.onChildClick(event)}>
      <Text> Click Me </Text>
    </TouchableOpacity>
  </View>
</TouchableWithoutFeedback>
<!-- edit description:- there was this end curly brace missing in above,
 however the snippet will not run because the language js will not 
support it and language html will not be able to format it correctly or run it.
(need to run the snippet on the react native environment like code-pen)  -->

预期:点击“Click Me”时，必须调用 onChildClick()

问题:点击“Click Me”时，会调用 onParentClick()。

如何防止点击“点击我”时 parent 点击事件？

我点击父级得到的结果是“父级被触发”，它工作得很好。

但是在点击子项时，我得到的结果是“父项被触发”。

我猜 onChildClick() 没有被触发。

Answer 1

老问题，但我遇到了同样的问题，就我而言，问题是:

import {TouchableOpacity} from 'react-native';
import {TouchableWithoutFeedback} from 'react-native-gesture-handler';

这个奇怪的导入是由于 eslint 的自动建议而发生的。不知何故，这些库不能很好地协同工作，所以我将上面的内容更改为:

import {TouchableOpacity, TouchableWithoutFeedback} from 'react-native';