React.js入門

フォームが送信されたらデータを更新する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームのデータを送信して、ページの表示を更新します。
講師:
03:29

字幕

このレッスンでは、フォームに入力したデータをサーバーに送ってデータを書き換えその結果を反映してページに新たなデータを追加するという風にしたいと思います。今の所サーバーにデータは送っていません。入力をして送信すると、サーバーに送る準備ができたということを確認するためにconsole.log で送るデータを表示しています。このデータを実際にサーバーに送ろうということです。サーバーにデータを送るメソッドは親のコンポーネントの中のhandleCommentSubmitというメソッドで定められています。最も先程確認した通り今の所はただ単にconsole.log で、送られてきたデータを確認するだけです。このメソッドはフォームの submit送信がボタンが押されるとこのコールバックから呼びだされるようにしてあります。では、ここに ajaxjQuery の ajax のメソッドを使ってサーバーにデータを送るという処理を書きたいと思いますがサーバーからロードするというメソッドがここにあります。メソッドは ajax で同じですし設定する項目共通する部分が多いのでこれをコピーしてしまいましょう。コピーして console.log を上書きします。 もちろん、ロードするのと送るのとでは設定項目が少し違っています。まず cache ですね。送るのに cache 関係ないですね。ロードする場合に cache を使うわけですからここは消してしまいます。代わりに type というプロパティを定めます。これは送り方なんですけど送信には GET と POST と2種類あります。今回は POST を使います。そしてカンマ区切りでもう1つ、どのデータを送るのか指定しないとダメですよね。ですから data ということでもちろん送るのは、この受けとったオブジェクトです。名前とコメント、2つの値がプロパティに設定されています。ではこれで保存しましょう。ローカルサーバーのページをリロードしてそして入力します。送信ボタンを押しますとサーバーとデータが更新されます。そして追加されると、ちゃんと動きましたね。ローカルサーバーのjson ファイルcomments.json を開いています。そうすると、今入力したデータが確かに追加されていますね。ですから、このデータが書き換わってページの方に反映されたということになります。このレッスンでは、送信ボタンを押した時にテキスト入力フィールドに入れたデータをサーバーに送りjson データを更新しページに’反映するという所までやりました。 送信のメソッドはjQuery の ajax メソッドですね。ロードする場合と基本的には同じなんですけど、違う点は、type で POST を指定したと。それから送信するデータを data というプロパティで指定したということです。

React.js入門

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

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

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

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

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