时间戳

首页 > 解决方案 > React Native 响应儿童新闻事件

javascript - React Native 响应儿童新闻事件

问题描述

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

我不想打断孩子对该事件的反应，我只想对该事件做出进一步反应以执行其他任务。出于这个原因，我不能在父组件上使用捕获阶段，因为它将停止在链中进一步传播事件。

我也不想手动为父级的每个子级添加新闻响应功能，因为会有很多子级，这会成为一项乏味的任务，尤其是在重构或重新实现时。

父 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>

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

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

标签： javascriptreact-nativeevents

解决方案

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

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

推荐阅读