React.js入門

データをテキスト入力フィールドに表示する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
データの初期値をフォームのテキスト入力フィールドに表示します。
講師:
04:09

字幕

このレッスンでは、コンポーネントに定められた初期値のデータを2つのテキスト入力フィールドに表示したいと思います。現在コンポーネントにはここに入れるための初期値のデータを内部的に持っています。それは送信ボタンを押すとconsole.log で出力するようになっていますので確認しましょう。「表示」>「開発/管理」>「JavaScript コンソール」です。そして、送信ボタンを押しますと名前が「湯川 秀樹」そしてコメントが「アイデアの秘訣は執念である。」という風になっています。最もこの2つのテキスト入力フィールドと連動はしていませんので例えば、ここに何かデータを入れてそして、送信ボタンを押してもやはりでてくるのは初期値のデータということになっています。このデータを、まずはこの2つの入力欄にそれぞれ表示しようということです。ホームのコンポーネントはこの下の方に定義されていて、このコメントフォームです。初期値は getInitialState というメソッドで設定することになっています。この return の中身ですね。オブジェクトで返すんですがそこにプロパティと値が入っています。そして、送信ボタンを押した時にonSubmit の属性にメソッドの呼び出しが設定されています。 それがこれですね。まずはデフォルトの動きを止めて statestate に設定されるわけですからstate からプロパティを取り出して変数に入れ確認のために console.log で出力したということになっています。では、この state に設定された2つの値をinput のなかに設定するには入力欄ですね。テキスト入力フィールドの中に設定をしたいと思うのですがその場合にはプロパティ、属性ですね、value を使います。そして、その中にthis.state.author をこちらに持ってきます。コピーですね。同様にコメントの方も、コメント入力のテキスト入力フィールドの方もvalue で、こちらはthis.state.text ということになります。これで保存しましょう。ローカルサーバーの sample.htmlこれをリロードして更新します。「湯川 秀樹」「アイデアの秘訣は執念である。」と送信ボタンを押すとこれは先程と同じようにでてきますがこのデータがきちんと設定されたということになります。最も、タグの中でvalue 属性で値を固定しています。そして初期設定した値というのは変える手段を、今まだ処理を加えていませんのでこの値は変えられないということになります。 ですから、タイプをしてもテキストが入りませんし消そうと思っても消えないということになります。この値を変更するには入力をした時に state のデータを更新するような処理を、また新たに加えなければいけないということです。このレッスンでは、コンポーネントに設定されたデータの初期値をテキスト入力フィールドに表示しました。初期値というのはgetInitialState で設定されてこの return の中のプロパティに値が設定されるわけです。それを取り出すにはthis.state.プロパティ名ということで取り出せますのでそれを input 要素のvalue 属性に設定しました。但し注意は、この state のデータを変えない限りテキスト入力フィールドの値も変わらないということです。

React.js入門

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

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

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

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

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