onTouch Material-UIダイアログを使用して2回タップをタップ

Question

Material-uiを使用してダイアログボックスを表示するReactプロジェクトを構築しました。何らかの理由で、ダイアログを開くトリガーとなるボタンをクリックすると、2番目のタッチイベントが発生して、ダイアログボックスにあるリンクまたはボタンがトリガーされるように見えます。同様の問題は、ボタンをクリックしてダイアログボックスを閉じると発生します。これを行うと、ダイアログは閉じますが、クリックした要素のすぐ後ろにある要素で別のタッチイベントがトリガーされます。

Material-uiを使用するためにreact-tap-event-pluginが含まれています。このゴーストタップの動作で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

問題は、onTouchTapイベントを処理するかどうかにかかわらず、遅延後にonClickイベントがトリガーされることです。したがって、onTouchTapイベントがトリガーされ、Dialogが閉じると、onTouchTapイベントが発生した同じ場所で遅れて別のonClickイベントが発生します。だから、ダイアログが消えた後、あなたの「触れ」の下にある要素は、onClickイベントを受け取ります。

これを修正するにはonTouchTapイベントハンドラ内でe.preventDefault（）を呼び出します。 このように：

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

希望します。

Answer 2

私はあなたのコードを実行し、私はこのエラーを取得する：

Uncaught TypeError: Cannot read property 'setState' of null 

ので、このキーワードは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 }) 
} 

ボタンで開くときに同じ問題が発生することがあります。