onTouch Material-UI 대화 상자로 두 번 누르기

Question

Material-ui를 사용하여 대화 상자를 표시하는 React 프로젝트를 만들었습니다. 어떤 이유로, 대화 상자를 열도록 트리거하는 버튼을 클릭하면 두 번째 터치 이벤트가 발생하여 대화 상자에있는 링크 또는 버튼이 트리거됩니다. 버튼을 클릭하여 대화 상자를 닫을 때도 비슷한 문제가 발생합니다. 이렇게하면 대화 상자는 닫히지 만 클릭 한 요소 바로 뒤에있는 요소에서 다른 터치 이벤트를 트리거합니다.

Material-UI를 사용하기 위해 react-tap-event-plugin을 포함 시켰습니다.이 고스트 탭 동작에 겹치는 요소 2 개가 없으면 응용 프로그램이 실제로 잘 작동합니다.

이것은 우리의 구성 요소와 같은 모습의 단순화 된 버전입니다 :

그 동작 버튼 "마침"대화 상자가 닫히고 다음 뒤에 요소도 touchTap 이벤트를 수신 클릭하면 그건

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 
    } 
} 

.

차이가 있다면 Google은 Cordova를 사용하여 모바일 용 앱을 포장합니다. 모바일에서만 (iOS에서는) 문제가 발생했으나 Chrome에서 테스트하는 동안 기기 모드에서도 문제가 발생했습니다.

내가 뭘 잘못하고 있니? 어떤 조언을 주시면 감사하겠습니다.

Uncaught TypeError: Cannot read property 'setState' of null 

그래서 this 키워드가 null : 나는 당신의 코드를 실행하면

Answer 1

문제는 onTouchTap 이벤트를 처리하는지 여부에 관계없이 지연 후 onClick 이벤트가 트리거된다는 것입니다. 따라서 onTouchTap 이벤트가 트리거되고 Dialog가 닫히면 onTouchTap 이벤트가 발생한 동일한 위치에서 지연된 후에 다른 onClick 이벤트가 발생합니다. 그래서 대화 상자가 사라진 후에 'touch'아래에있는 어떤 요소 가든 onClick 이벤트를 받게됩니다.

해결 방법 : onTouchTap 이벤트 처리기 내에서 e.preventDefault()를 호출하십시오. 이처럼 :이 도움이

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

희망.

Answer 2

나는이 오류가 발생합니다. 함수를 클래스 인스턴스에 바인딩해야합니다. 어느 생성자 사용 :

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 }) 
} 

그리고 단추로 열려고하면 같은 문제가 발생합니다.