如何防止本机反应中的父点击事件？

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>

预期：单击“单击我”时，必须调用 onChildClick()

问题：单击“单击我”时，将调用 onParentClick()。

如何防止父母点击“点击我”的点击事件？

我点击父级时得到的结果是“父级被触发”，它运行完美。

但是点击孩子，我得到的结果是“父母被触发”。

我猜 onChildClick() 没有被触发。

Answer 1

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

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

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

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

Answer 2

您event.stopPropagation可以阻止事件传播给父母： https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation

onClick 传递的第一个参数是事件本身：

function onChildClick(e) {
    e.stopPropagation();
    console.log('The link was clicked.');
}