Reactで子コンポーネントから親コンポーネントのメソッドを呼び出す。
最近reactを始めて、コンポーネント間でのメソッドの共有だったりが
ようやくできるようになってきましたので、備忘録的に。
※本当の本当に初歩的な内容になります。
子から親コンポーネントのメソッドを呼び出す。
便宜上一枚のjsファイルですが、実際は分かれてます。
class Parent extends Component {
shoutParent(){
console.log('親だよ！！！');
}
render() {
return (
<Child parentMethod={this.shoutParent} />
);
}
}
class Child extends Component {
render() {
return (
<button onClick={this.props.parentMethod}>
押しまっせ
</button>
);
}
}
constructorなどは省略して最低限にしてます。
手順
①子コンポーネントにpropsとしてmethodを渡す。
Reactでは、
<コンポーネント名 />
といった形で、コンポーネントをレンダリングします。
レンダリングとは、ざっくりといえばviewに表示することです。
一つのコンポーネントはそれぞれstate（状態）を持っており、
setState() 関数によって更新されると、その度に再レンダリングされます。
（この辺は別の記事で書きたいと思います。）
このようにレンダリングすると、二つのコンポーネントに親子関係ができます。 この例だと、 ”Parent”というコンポーネントの中で、 “Child"というコンポーネントをレンダリングしているので、
ということになります。
そして親コンポーネントは子コンポーネントにpropsとして関数や値を渡すことができます。 ちなみにpropsは一度レンダリングされると変更できません。 参考:facecook公式document
今回は、propsの中にparentMethodというキーをセットし、 値を this.shoutParent としました。
thisとは
このthisはコンテキストと呼ばれ、reactとは関係ないのですが、 理解すると非常に便利でjavascript中級者になれます。 （初心者の内容だとメンターに言われました。笑） なので別の記事で詳しく書きたいと思います。 更新予定です(2016/11/26)
ここで簡単に説明すると、thisとはParentコンポーネントのことです。
つまりこれでchildコンポーネントのpropsの中に
props = {
parentMethod: Parent.shoutParent
}
という値がセットされました。
②子コンポーネントからpropsに入っているmethodを呼び出す
あとは簡単で、なんらかのイベントで this.props.parentMethod を呼び出すだけです。
今回はonClickで呼び出しました。
注意点としてはこのthisはChildコンポーネントのことですので注意してください。 その名前の通りコンテキスト（文脈）によってとる値が変わるのがthisです。
③注意点
本来はChildコンポーネントとParentコンポーネントは別ファイルですので、 Childコンポーネントの方でimportを使ってParentを取り込まなければなりません。 書き方はこのような感じです。
import {Parent} from 'ここにpathを書く';
これをページ上部に追加しましょう。
疑問
①逆に親のメソッド呼び出したい場合はどうしたらいいの？
すこしトリッキーな挙動になりますがこちらの記事を参照ください。
②thisってなんなの？よくわからない！
更新予定です(2016/11/26)
