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 会被调用。

您可以做的是您可以在组件上设置状态，并在下一个渲染周期中将事件传递给您的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
  }
}