onTouchTap使用material-ui对话框触发两次

Question

我们已经构建了一个使用Material-ui来显示对话框的React项目.出于某种原因,当您单击触发对话框打开的按钮时,似乎会触发第二个触摸事件,这可能会触发对话框上的链接或按钮.通过单击按钮关闭对话框时会发生类似的问题.执行此操作时,对话框将关闭,但会在您单击的元素后面的元素上触发另一个触摸事件.

我们已经包含了react-tap-event-plugin为了使用Material-ui,只要没有2个元素重叠在这个重影点击行为上,app就能很好地工作.

这是我们的组件的简化版本:

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中进行测试时也会在设备模式下遇到此问题.

我究竟做错了什么？任何意见,将不胜感激.

Answer 1

问题是,在延迟触发onClick事件后,无论您是否处理onTouchTap事件.因此,在触发onTouchTap事件并关闭对话框后,在触发onTouchTap事件的同一位置发生延迟后,会出现另一个onClick事件.因此,在对话框消失后,"触摸"下面的任何元素都会收到onClick事件.

解决此问题:在onTouchTap事件处理程序中调用e.preventDefault().像这样:

<Button onTouchTap={(e) => { e.preventDefault(); this.finish()}}>Finish</Button>

希望这可以帮助.