質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

6285閲覧

refsを使って、reactで親componentから子componentのメソッドを呼び出したい。

OnomimonO

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2016/11/26 09:58

編集2016/11/26 10:00

ここに2つのコンポーネントがあります。
親componentから子componentのメソッドを呼び出したいです。

ググるとrefを使えとあるのですが、うまく動きません。

Javascript

1class Parent extends Component { 2 parentMethod(){ 3 this.refs.child.childMethod(); 4 } 5 render() { 6 return ( 7 <Child ref='child'/> 8 ); 9 } 10} 11 12class Child extends Component { 13 childMethod() { 14 alert('You made it!'); 15 } 16 render() { 17 return ( 18 <h1 ref="hello">Hello</h1> 19 ); 20 } 21}

しかしこのコードを走らせると、下記のエラーがコンソールされます。

_this3.refs.child.childMethod is not a function

質問は二つです。
1、なぜthisは、Parentをささずに、_this3となっているのでしょうか?
2、他に子コンポーネントのメソッドを呼び出す方法はないのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

1、なぜthisは、Parentをささずに、_this3となっているのでしょうか?

1 については this の context の問題と思いますので呼び出し側、または定義のコードを確認されるとよいように思います。

js

1// Arrow Function で this を bind する例 2parentMethod = () => { 3 this.refs.child.childMethod(); 4}

2、他に子コンポーネントのメソッドを呼び出す方法はないのでしょうか?

2については的確な回答を持たないのですが、とりあえず Redux などを考慮しない場合、処理・データの流れを 親 => 子 に統一したほうがシンプルだと考えているため

  1. 親から子に渡す props の値を変化させる (例えば親Component で shouldCallChildMethod といった boolean 型の state を持っておきそれを子に渡す props に含めておくとか...)
  2. 子Component の componentWillReceiveProps() で props の変更を起点に何らかの処理をする (今回の場合 childMethod() の実行)

という方法で対処できないかを検討する気がします(僕の場合)。

投稿2016/12/29 04:15

iktakahiro

総合スコア142

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問