Question

我正在寻找一种解决方案，该解决方案允许我从父级组件响应所有子级的新闻事件（包括嵌套在其他组件中的子级）。我尤其对新闻发布事件（例如onPressOut for TouchableOpacity等）感兴趣。

我不想打断孩子对那个事件的反应，我只想对那个事件做进一步的反应来执行其他任务。因此，我无法在父组件上使用捕获阶段，因为它将停止在链中进一步传播事件。

我也不想为每个父母的孩子手动添加新闻响应功能，因为会有很多孩子，这变得很繁琐，尤其是在重构或重新实现方面。

父级TouchableOpacity组件允许我在“冒泡事件”阶段中，在没有孩子响应的情况下捕获所有新闻事件。但是，如果孩子对此做出反应，则该事件不会在链中进一步传播，因此，它将永远不会到达父级TouchableOpacity。

在代码中：

<TouchableOpacity onPressOut={ this.doSomethingInParentWhenAChildIsPressed >
    <TouchableOpacity onPressOut={()=>{
        /* doing something in child, parent should react in addition to this */
    } />
    <View>
        <TouchableOpacity onPressOut={()=>{
            /* doing something in nested child, parent should react in addition to this */
        } />
    </View>
    <View>
        <Text>When this text is pressed, the parent TouchableOpacity responds</Text>
        <View>
            <TouchableOpacity onPressOut={()=>{
                /* doing something in other nested child, parent should react in addition to this */
            } />
        </View>
        <View>
            <Text>The parent TouchableOpacity also responds on this text being pressed</Text>
        </View>
    </View>
</TouchableOpacity>

您知道实现这一目标的任何方法吗？

是否有可能以某种方式从父级捕获触摸开始事件，同时仍允许该事件在链中进一步传播？我一直在寻找可以创建Synthetic事件并在React Native中发出它的东西，但找不到任何解决方案。

Answer 1

u可以定义一个函数，该函数将在按下父级时调用，并在按下子级时调用相同的功能

class App extends React.Component {
  onPress = () => {
    console.log('Parent Pressed');
  };
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.onPress}>
          <View style={styles.button}>
            <Text>Parent</Text>
            <TouchableHighlight onPress={() => {
              console.log('Child Pressed')
              this.onPress()
            }} style={styles.child}>
              <Text>Child</Text>
            </TouchableHighlight>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

查看此小吃精品https://snack.expo.io/@ashwith00/4ddff3

反应本地人对儿童新闻事件的反应

1 个答案: