javascript - 监听可触摸元素内的按下事件的元素

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>

当然，您需要在构造函数中设置初始状态。

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