親コンポーネントのメソッドにアクセスするon React

Question

タイトルが示唆するように、私は親コンポーネントのメソッドにReact by a childコンポーネントでアクセスしようとしています。私はこれが小道具を介して達成できることを理解していますが、私はonClickイベントでそれをやろうとしていますが、そのようには見えません。ここに私の問題の基本的な例があります。

var Child = React.createClass({ 

render: function() { 
    return (

     <button onClick={this.onClick}>Click Here</button> 
); 
} 
}); 


var Parent = React.createClass({ 

onClick: function() { 
    console.log('I've been clicked'); 
    }, 


render: function() { 
    return (

     <Child /> 

); 
} 
}); 

ReactDOM.render(<Parent />, document.getElementById('Parent')); 

子コンポーネントのボタンonClickイベントを取得して、親コンポーネントのonClickメソッドを起動するにはどうすればよいですか？ヘルプをよろしくお願いいたします。

Answer 1

<button onClick={this.props.myClick}>Click Here</button> 

全体コード：

var Child = React.createClass({ 
    render: function() { 
     return (<button onClick={this.props.myClick}>Click Here</button>) 
    } 
}); 

var Parent = React.createClass({ 
    onClick: function() { 
     console.log("I've been clicked"); 
    }, 

    render: function() { 
     return (<Child myClick={this.onClick} />); 
    } 
}); 

ReactDOM.render(<Parent />, document.getElementById('container')); 

Answer 2

それはちょうど反作用です。それを小道具として子供にコールバック関数への参照を渡すことができますし、子供が小道具を使用して関数を呼び出しさせるようにします。これは反作用の方法であり、親プロパティにアクセスする子になると、小道具の外で行うことはできません。

子コンポーネントで何か他の処理をしたい場合は、子コンポーネントの中でonclick関数を定義し、何か追加を行うか、引数をthis.props.onClickに追加することができます。

<Child myClick={this.onClick} /> 

、その後、子供にそれを使用する：あなたが小道具として子供に親のonClick関数を渡すことができ