をダブルクリックしてイベントに伝播を停止する方法

Question

は、このコンポーネントを考えてみましょう：

<Card onClick={openWindowHandler}> 
    <Editable onDoubleClick={enableInputHandler} /> 
</Card> 

私は何を達成したいことはイベントの伝播を停止することで、のみ onDoubleClickイベントが送出されたときに、「openWindowHandler」関数ではないので、と呼ばれる。しかし、onClickはonDoubleClickの前に起動します！

_.debounce関数を適用することでどのイベントタイプが呼び出されたのかを区別できますが、その時点でイベントはすでにディスパッチされていたため、stopPropagation（）を呼び出す方法はありません。

class App extends React.Component { 
    delayedCallback = _.debounce(function (event) { 
    if (event.type === 'dblclick') { 
     // too late to call event.stopPropagation() 
    } else { 
     // continue 
    } 
    }, 250) 

    handleClick = (event) => { 
    event.persist() 
    this.delayedCallback(event) 
    } 

    render() { 
    return (
     <Card onClick={this.handleClick}> 
     <Editable onDoubleClick={this.handleClick} /> 
     </Card> 
    ) 
    } 
} 

これを行う方法はありますか？

EDIT： <Editable />要素をシングルクリックが「openWindowHandler」コールを引き起こして両親にバブリングされなければなりません。

Answer 1

例：

// This will return a event 
function clickHandlerModule() { 
    var clickCount = 0; 
    var timer = null; 
    var delay = 250; 
    return function(event) { 
     clickCount++; 
     if(clickCount === 1){ 
      timer = setTimeout(function(){ 
       console.log('SINGLE CLICK'); 
       clickCount = 0; 
      }, delay); 
     } else { 
      clearTimeout(timer); 
      console.log('DOUBLE CLICK'); 
      clickCount = 0; 
     } 
    } 
} 


class App extends React.Component { 
    constructor() { 
    super(); 
    this.clickHandler = clickHandlerModule() 
    } 
    render() { 
    return (
     <Card onClick={this.clickHandler}> 
     <Editable /> 
     </Card> 
    ) 
    } 
}