今回はReactで子コンポーネントに書いたメソッドを親コンポーネントで実行する方法を解説します。
サンプルとして、子コンポーネントでアラートを表示するメソッドを作り、それを親コンポーネントで実行してみます。
デモはこんな感じ↓
子コンポーネントのメソッドを親コンポーネントで実行する方法
デモのコードを解説していきます。
まずは子コンポーネント（<Child />）
export default class Child extends Component {
// ①親で実行するメソッドを子コンポーネントで用意
getAlert() {
alert('getAlert worked!');
}
render() {
return <h1>click button!</h1>;
}
}子コンポーネントではメインの処理を書くだけです。メソッドはバインドする必要もありません。
続いて親コンポーネント（<Parent />）
export default class Parent extends Component {
constructor(props) {
super(props);
this.ChildRef = React.createRef(); // ←②React.createRef()で参照を作成
this.doClick = this.doClick.bind(this);
}
// ③子コンポーネントのメソッドを実行するメソッドを親で作成
doClick() {
this.ChildRef.current.getAlert(); // this.ref名.currentで実体にアクセス
}
render() {
return (
<div>
<Child ref={this.ChildRef} /> {/** ←④子コンポーネントを呼び出し、refで参照する */}
<button onClick={this.doClick}>click me</button> {/** ←⑤親で関数を実行 */}
</div>
);
}
}まずはコンストラクター内でthis.ref名 = React.createRef();で参照を作ります。
次に子コンポーネントのメソッドを実行するメソッドを親コンポーネントに書きます。子コンポーネントの実体にアクセスするにはthis.ref名.currentと書くので、this.ref名.current.子メソッドで子コンポーネントのメソッドを呼び出せます。こちらはバインドを忘れずに。
そうしたら子コンポーネントを呼び出し、ref={this.ref名}というプロパティを渡します。これで作成した参照がこの子コンポーネントと紐付きます。
最後に親コンポーネントのメソッドを実行すれば、子コンポーネントのメソッドを呼び出せます。
まとめ
アプリの規模が大きくなってくると親コンポーネントから子コンポーネントのメソッドを実行したいというときがあると思います。
refを使えばできるので、ぜひ試してみてください。
ただしやりすぎるとコードを追うのがつらくなるのでほどほどに…。
