我们已经构建了一个使用 Material-ui 来显示对话框的 React 项目。由于某种原因,当您单击触发对话框打开的按钮时,似乎会触发第二个触摸事件,这可能会触发对话框上的链接或按钮。当您通过单击按钮关闭对话框时,也会出现类似的问题。执行此操作时,对话框将关闭,但会在您单击的元素正后方的元素上触发另一个触摸事件。
我们已经包含了 react-tap-event-plugin
以便使用 Material-ui,并且只要没有 2 个元素在此幽灵点击行为上重叠,该应用程序就可以正常工作。
这是我们组件的简化版本:
import React, { Component } from 'react'
import Dialog from 'material-ui/Dialog'
class Introduction extends Component {
constructor(props) {
super(props)
this.state = { complete: false }
this.finish = this.finish.bind(this)
}
finish() {
this.setState({ complete: true })
}
render() {
const actions = (
<div>
<button onTouchTap={this.finish}>Finish</button>
</div>
)
if (!this.state.complete) {
return (
<Dialog open actions={actions}>
<h3>Dialog header</h3>
<p>Dialog text</p>
</Dialog>
)
}
return null
}
}
当单击操作按钮“完成”时,对话框将关闭,然后其后面的元素也会收到 touchTap 事件。
如果有什么不同的话,我们将使用 Cordova 来包装移动应用程序。我们仅在移动设备上遇到此问题(当然是在 iOS 上),而且在 Chrome 中测试时也在设备模式上遇到此问题。
我做错了什么?任何建议将不胜感激。
最佳答案
问题是,无论您是否处理 onTouchTap 事件,延迟后都会触发 onClick 事件。因此,在触发 onTouchTap 事件并且您的对话框关闭后,在触发 onTouchTap 事件的同一位置延迟后,会出现另一个 onClick 事件。因此,对话框消失后位于“触摸”“下方”的任何元素都将收到 onClick 事件。
要解决此问题:在 onTouchTap 事件处理程序中调用 e.preventDefault()。 像这样:
<Button onTouchTap={(e) => { e.preventDefault(); this.finish()}}>Finish</Button>
希望这有帮助。
关于reactjs - onTouchTap 使用 Material-ui 对话框触发两次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38363789/