子コンポーネントの同じイベントに複数のイベントリスナーを親コンポーネントからReactに添付するにはどうすればよいですか？

Question

リンク、ボタン、またはその他のReactコンポーネント（子）をプロパティとして受け取るReactコンポーネント（親）を作成しています。渡されたコンポーネントに追加のクリックハンドラを追加したいとします。この子コンポーネントは通常、既にクリックハンドラが定義されているので、React.cloneElementを使用してonClickを追加するだけではありません。また、子コンポーネントのクリックハンドラが親コンポーネントへのイベント伝播を防ぐこともあるので、親にクリックリスナをアタッチしてイベントをバブルアップさせることはできません。

編集：親/子関係とどのように/余分なイベントリスナーを添付しなければならないところが、私が見てきた他の質問からこの質問は少し違う、答えはコールバック（またはコールバックの配列を渡すことです）を子コンポーネントに追加します。子コンポーネントのAPIを変更するためのアクセス権がありません。上記のコメントで提案されているように私はこれまでのところ、これを行うために見つけた最良の方法は、参照文献を使用し、findDOMNode

export default class ParentComponent extends React.Component { 
    constructor(props) { 
     super(); 

     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick(event) { 
     // do something (this is not working) 
    } 

    render() { 
     let { childComponent } = this.props; 

     return (
      <div> 
       {React.cloneElement(childComponent, { 
        onClick: this.handleClick 
       })} 
      </div> 
     ) 
    } 
} 

ParentComponent.PropTypes = { 
    childComponent: PropTypes.element 
}; 

Answer 1

：

はここにいくつかのサンプルコードです。あなたは、子コンポーネントのDOMノードへの参照を持っていたら、親部品が実装されます定期的なイベントリスナーを追加することができます。

export default class ParentComponent extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    componentDidMount() { 
     this.childComponentRef.addEventListener('click', function() { 
      // do something (this works!) 
     }, false); 
    } 

    render() { 
     let { childComponent } = this.props; 

     return (
      <div> 
       {React.cloneElement(childComponent, { 
        ref: (childComponentRef) => { 
         this.childComponentRef = ReactDOM.findDOMNode(childComponentRef); 
        } 
       })} 
      </div> 
     ) 
    } 
} 

ParentComponent.PropTypes = { 
    childComponent: PropTypes.element 
}; 

の