Question

我们已经构建了一个使用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中进行测试时也会在设备模式下遇到此问题。

我做错了什么？任何建议将不胜感激。

Answer 1

The problem is that after a delay an onClick event is triggered, whether you handle the onTouchTap event or not. So after the onTouchTap event is triggered and your Dialog closes there comes another onClick event after a delay at the same location your onTouchTap event was fired on. So whatever element lies 'under' your 'touch' after the dialog is gone will receive the onClick event.

To Fix this: call e.preventDefault() inside the onTouchTap event handler. Like this:

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

Hope this helps.

Answer 2

运行代码时出现此错误：

Uncaught TypeError: Cannot read property 'setState' of null

所以this关键字为null。您需要将函数绑定到类实例。在构造函数中使用：

constructor(props) {
  super(props)
  this.finish = this.finish.bind(this);
  this.state = { complete: false }
}

或者

<button onTouchTap={this.finish.bind(this}>Finish</button>

或者你可以使用自动绑定到类的es6箭头函数。

finish = () => {
  this.setState({ complete: true })
}

我想当你尝试用按钮打开它时会出现同样的问题。

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

2 个答案: