Question

我有一个侦听新闻事件的元素。如何将其包装在可触摸元素中并让我的自定义元素继续监听事件？

我是这样的结构

<TouchableOpacity
    onPress={(e) => { console.log(e.nativeEvent); }}
    style={{ flex: 1 }}
>
    <EpubDocumentReader
        toggleEditHighlightModal={this.toggleEditHighlightModal}
        onPress={(cfi, contents) => { console.log(cfi); }}
        styleWidthBook={styleWidthBook}
    />
</TouchableOpacity>

现在TouchableOpacity抓住了新闻事件，但它没有在子元素上调用该事件。

Answer 1

你想要实现什么目标？

永远不会调用您自定义组件的onPress。

只会调用TouchableOpacity的onPress。

您可以做的是您可以在组件上设置State，并且在下一个渲染周期中，您可以将事件传递给EpubDocumentReader。

<TouchableOpacity
    onPress={(e) => {
        console.log(e.nativeEvent);
        this.setState({
            event: e
        })
    }}
    style={{ flex: 1 }}
>
    <EpubDocumentReader
        event={this.state.event}
        toggleEditHighlightModal={this.toggleEditHighlightModal}
        onPress={(cfi, contents) => {
            console.log(cfi);
        }}
        styleWidthBook={styleWidthBook}
    />
</TouchableOpacity>

当然，您需要在构造函数中设置initialState。

constructor(props){
  super(props)
  this.state = {
    event: null
  }
}

在可触摸元素内听新闻事件的元素

1 个答案: