レンダリングメソッドは、どのイベントハンドラ/状態変更がそれを呼び出したかを認識していますか？

Question

私はonMouseDown、onMouseOver、onMouseUpを対応する方法（すべてが状態を変えます）で使用します。

onMouseUpが呼び出された場合、レンダリングされたすべての子コンポーネントに対していくつかの計算を適用する必要があります。

どうすればこのことができますか？

Answer 1

私は、これはあなたが探しているものだと思うん：

const SampleComponent = React.createClass({ 

    getInitialState() { 
     return { 
      isMouseDown: false, 
      isMouseOver: false, 
      isMouseUp: false 
     }; 
    }, 

    handleEvent(e) { 
     const eventType = e.type; 
     this.setState({ 
      isMouseDown: eventType === 'mousedown', 
      isMouseOver: eventType === 'mouseover', 
      isMouseUp: eventType === 'mouseup' 
     }); 
    }, 

    renderContent() { 

     if (this.state.isMouseDown) { 
      return (<p>Mouse is down</p>); 
     } else if (this.state.isMouseOver) { 
      return (<p>Mouse is over</p>); 
     } else if (this.state.isMouseUp) { 
      return (<p>Mouse is up</p>); 
     } 
     return (<p>default content</p>); 
    }, 

    render() { 

     return (
      <div 
       onMouseDown={ this.handleEvent } 
       onMouseOver={ this.handleEvent } 
       onMouseUp={ this.handleEvent } 
      > 
       { this.renderContent() } 
      </div> 
     ); 
    } 

}); 

module.exports = SampleComponent;