React.js入門

フォームの入力でデータを更新する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームのテキスト入力フィールドで、データを変更できるようにします。
講師:
07:58

字幕

このレッスンではテキスト入力フィールドへの入力でコンポーネントの データを変更できるようにします。現在内部的にデータの初期値が定められていてそれがテキスト入力フィールド2つに入っているんですけれどもこれを変更する処理が加えられていません。ですから、この値はキーボードから入力して追加したり削除したりということができません。これを編集できるようにします。そのためにはコンポーネントが持つデータを更新するという処理を加えます。フォームのコンポーネントはこの下の方に定義されています。CommentForm と。これがそうです。そしてテキスト入力をしたらという設定はこの input 要素の方に加えますのでちょっと長くなりますから改行を入れましょう。属性ごとに改行を入れて見やすくします。インデントを落としますね。それからこちらも同様です。value も改行して、閉じタグですね。ボタンの方は短いですからこのままにしておきます。入力を変更したらというプロパティ属性は onChange になります。onChange と。そして、ここにスクリプトを書くんですがメソッドの呼び出しにします。this.handleAuthor ですね。 Change と。同じようにもう1個コメント欄の方ですね、こちらにもコピーを持ってきてそしてメソッド名は変えます。Author の所を text にします。この onChange はイベントハンドラになるのですがこれが呼び出されるタイミング、普通は React のこのプロパティは標準のビルトインのイベントあるいは属性と仕様を揃えるんですけれどもこの onChange についてはちょっと違います。ビルトインの onChange というのはテキスト入力フィールドに入力をしてフォーカスを外した時別のフィールドの方に移した時に発生するんですが、この React の onChange のプロパティは入力をする毎に編集をする度に発生します。ですから、ビルトインの onInput とほぼ同じ動きだというふうに思ってください。では、この2つのメソッドですね、こちら handleAuthorChange を加えていきます。では handleSubmit の上にhandleAuthorChange と。コピーを持っていってコロンで function ですね。あとカンマで区切る必要がありますがイベントハンドラですのでこのハンドラはeventObject を受け取ります。 これが今回必要なのでコピーして持って行きます。データを変えるcomponent のデータを変えるという場合にはthis.setState ですね。これで変えることができます。この中にオブジェクトで変えるプロパティと値を設定するということになります。Author の方はプロパティも Author ですね。そして値はというと今、入力をしている・修正をしているそのテキスト入力フィールド、input 要素を取りたいという場合にはここで eventObject を参照してtarget で、その要素を取得することができます。そして値は value ですね。これで新たな値に Author のプロパティの値が変わります。元々は湯川秀樹と入っていたんですがそれが変わるということになります。あと handleTextChange ですね。こちらも基本的には同じ形ですからここでコピーしてしまいましょう。コピーしてペーストです。そして、これはコピーしましょう。コピーして handleTextChange と。ペーストします。ちょっとインデントが狂っているので修正をしましょう。handleTextChangeそして、変えるプロパティは text ということになります。 これで保存しましょう。ローカルサーバーのページをリロードします。そして、文字を消してみましょう。ちゃんと消せますね。「アイデアの秘訣は」と。後を削除してしまいます。そして送信するとconsole.log でこのデータを確認するようになっていますので送信をすると編集されたデータが出て来ました。あと少しだけ手を加えます。テキスト入力フィールドから入力ができるようになりましたから初期値は空でいいですね。ということで、ここは空にしましてもう詰めてしまいましょう。中括弧閉じ。それから、この console.log これはサーバーにデータを送るという処理の代わりに仮に入れてあるんですけれどもこれは送ってしまえば、またフィールドは空にしてもいいですね。ということですのでthis.setState で送信ボタンを押すとconsole.log でデータが確認できデータを空に戻します。その後テキスト入力フィールドは空になるということになります。では、保存しましょう。ローカルサーバーのページはリロードしてそうすると、初期値が空になりましたので入力欄は空ですね。ここに入力をします。そして、送信ボタンを押しますとconsole.log の結果が出て来るわけですがサーバーにデータを送るとすればこのデータが送られると。そして、また入力欄は空に戻りました。 このレッスンではテキスト入力フィールドの入力でcomponent のデータを変更できるようにしました。component のデータはState に入っているわけなんですがまずは input 要素に onChange の属性でEventHandler を今回メソッドですけれどもメソッドで定めました。その中では setState でState を変更することができるわけですね。渡すのは object です。その時に値は eventObject の target ということで入力している input 要素は取れますのでその value を取ってきて必要なプロパティに設定すればいいということでした。

React.js入門

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

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

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

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

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