React.js入門

初期値のデータをサーバーに送る準備

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
コンポーネントにフォームのデータの初期値を定めて、サーバーに送る準備を整えます。
講師:
06:12

字幕

このレッスンではフォームのコンポーネントに初期値のデータを定めてこの「送信」ボタンを押したらそのデータを取り出すということをやってみたいと思います。取り出したデータを後でサーバーに送るということができますのでサーバーに送るための準備という位置付けになります。フォームのコンポーネントはこの script.js の下の方に定義されています。CommentFormこちらですね。これに対して設定をするわけですけども送信ボタンを押した時何かをやりたいという場合にはonSubmit という属性を設定します。そして、実行するスクリプトを書くんですけどもここでは関数を呼び出します。この関数はコンポーネントのCommentForm に定義しますのでthis. ですね。名前は handleSubmit としましょう。それを render の前に追加します。function ですね。そして { } で, (カンマ)で区切ります。onSubmit でこの「ハンドラ」という言い方もしますけれどもハンドラが呼び出されると引数が渡されます。一般にイベントオブジェクトと言われるんですがこの送信の処理 React で全てを処理したいと思います。 ですから、デフォルトのブラウザに備わっている処理は止めてしまいます。止めたい時にはこの eventObject に対してpreventDefault と言うメソッドを呼び出します。これでデフォルトの処理は全て止まってReact だけでこの送信ボタンを押した時の処理を管理することになります。何をするかと言うとデータを取り出します。state にアクセスしてその author というプロパティを取ってきます。それはどこにあるのかというとこれから定義します。もう1つ、 text というプロパティも設定することにしますのでそれを取り出します。state からです。そして、確認の為console.log で取り出した2つの値を確認します。そして state の初期値を定めるという場合にはメソッドが決まっています。getinitialState というメソッドです。function で...イニシャルの i は大文字ですね。getInitialStatefunction ( ) { }, で区切ります。そして getInitialState はreturn で初期値を返します。今回はオブジェクトです。 オブジェクトで初期値をプロパティに定めて返せば良いということなんですけどもでは、まず author です。「湯川秀樹」ノーベル物理学賞の受賞者ですね。そして , (カンマ)で区切ってtext ということで、コメントを書きます。「アイディアの秘訣は執念である」これは実際に湯川博士が言った言葉だそうです。これを初期値として設定しました。そして、送信ボタンを押すとhandleSubmit が呼び出されてこの初期値を変数に取り出し確認用ですけれどもconsole.log でコンソールに表示します。では、保存しましょう。ローカルサーバーのページをリロードします。それから console.log でコンソールを見ますので「表示」>「開発 / 管理」>「JavaScript コンソール」。ここに表示が出てくればいいんですけれども「送信」ボタンを押しますと「湯川秀樹」「アイディアの秘訣は執念である。」2つの値が出てきました。ただ、これはこちらの入力欄と何ら関連付けしていませんから何か入力してこちらのコンソールを1回クリアしましょう。「送信」ボタンを押してもやはり内部的に設定された初期値が表示されます。このレッスンではコンポーネントに初期値を定めて送信ボタンで、そのデータを取り出すということをやってみました。 フォームのコンポーネントに対して初期値は getInitialState で定めます。return のオブジェクトの中に設定するプロパティと値を書いていけばいいということですね。そして、送信ボタンを押した時の処理はonSubmitform の onSubmit の属性に指定するんですけども今回はメソッドの呼び出しを設定しました。そして、その中で state から初期値に設定した値を取り出してconsole.log で確認したということです。あと、デフォルトの動作を止めるにはpreventDefault というメソッドを使うということです。

React.js入門

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

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

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

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

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