我有一个监听新闻事件的元素。如何将其包装在可触摸元素中并让我的自定义元素继续监听事件?
我的结构是这样的
<TouchableOpacity
onPress={(e) => { console.log(e.nativeEvent); }}
style={{ flex: 1 }}
>
<EpubDocumentReader
toggleEditHighlightModal={this.toggleEditHighlightModal}
onPress={(cfi, contents) => { console.log(cfi); }}
styleWidthBook={styleWidthBook}
/>
</TouchableOpacity>
现在,TouchableOpacity
捕获按下事件,但不会在子元素上调用该事件。
最佳答案
你想要实现什么目标?
您的自定义组件的 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
}
}
关于javascript - 监听可触摸元素内的按下事件的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45846136/