React.js入門

データ送信のためのメソッドを加える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
親コンポーネントにデータ送信のためのメソッドを加えます。
講師:
05:33

字幕

このレッスンではサーバーにデータを送る為のメソッドの大枠を作ります。そのメソッドをどこに定義するかと言うとデータは state に持たれるわけですけれどもその state を持っているのは一番親のコンポーネントです。この CommentBox ですね。ですから、ここにメソッドを加えます。では render の前に名前は handleCommentSubmit としましょう。そして function ですね。, (カンマ)で区切ります。このメソッドは送る為のデータを受け取らなければいけません。ですから、引数にそのデータを...では comment としましょう。実際に送るということはこの段階ではしませんのでconsole.log で確認するだけにします。送られてきたオブジェクトを表示します。これができればあとは Ajax で送るという処理を加えていけばいいんですが今回は、ここまでです。では、このメソッドをどうやって呼び出すかということですね。呼び出すのはフォームのコンポーネントです。フォームのコンポーネントというのはこれですね。ここから呼び出したいのです。ですから、フォームのコンポーネントの中にthis.handleCommentSubmit( ) という風に呼ぶわけにはいきません。 そこで、ここにプロパティを定めます。プロパティは onCommentSubmit です。プロパティと言いましたけれどもこれは実質はコールバックです。ですから、フォームのコンポーネントCommentForm から、これを呼び出します。そして、その中にはここでしたらthis で参照ができますからhandleCommentSubmit を入れてしまいます。そうすると、フォームからこのプロパティをメソッドとして呼び出せばこれが実行されるということになるわけです。では、フォームのコンポーネントの方にこの呼び出しを定めたいと思います。コピーしておきましょう。そして、フォームのコンポーネントは下の方にありましてちょっと見にくいですね。これです。CommentForm です。送信ボタンを押すとこの onSubmit が実行されるわけですね。そして handleSubmit が呼び出されるということでこれが呼び出されます。今、この段階ではここで console.log を入れていますがこれを外してしまいます。代わりに、先程の定義したonCommentSubmit を呼び出すんですけれどもでは、ペーストしましょうか。 いきなり onCommentSubmit ではだめですね。まず this にアクセスしてそして props です。プロパティに定めましたからこれを呼び出せば良いということになります。そして、オブジェクトを渡す予定です。その中には、この2つをプロパティと値の組にして渡します。値も author ですね。そして、こちらは: textthis.prop はs が抜けていますね。s を入れましてそして保存します。ローカルサーバーのページをリロードしてでは、何か入力しましょう。あと、もう1つそして、「送信」ボタンをクリックするとここにオブジェクトが出てきてこの値の入ったプロパティが表示されれば OK ですね。author に fumioそして text のプロパティにはcomment と入りました。このレッスンでは親のコンポーネントに定めたサーバーにデータを送る為のメソッドに送るデータを渡すというところまでスクリプトを書きました。そのメソッドはこちらです。確認用に console.log で渡されたものをオブジェクトを確認しています。どうやって呼び出したかと言うとフォームからフォームの送信ボタンで送るのでプロパティにコールバックとしてこのメソッドを設定しました。 その上で、この CommentForm のコンポーネントの方に行きましてもう少し上ですね。ここですね。ここに定めたわけですけども送信ボタンを押してonSubmit でhandleSubmit が呼び出されるわけですからこの中で、プロパティに設定されたthis.props がonCommentSubmit に対してデータを作って送るということにしたわけです。そうすると、親コンポーネントのこのメソッドがコールバックから呼び出されるという仕組みになりました。

React.js入門

React.jsはFacebookが開発したJavaScriptライブラリです。このコースではReact.jsで定めた要素をHTMLドキュメントに差し込むことから始まり、JSONファイルから複数のデータを読み込んでリストを作ったり、サーバーとデータをやり取りするなど段階を踏みながらひとつのWebアプリを作りあげます。

2時間21分 (25 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2016年09月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。