React.js入門

フォームにinput要素を加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームにテキスト入力フィールドと送信ボタンのinput要素を加えます。
講師:
03:13

字幕

このレッスンではフォームにテキスト入力フィールドと送信ボタンを加えたいと思います。フォーム用のコンポーネントは一応は作ってあります。けれども、今はただこのテキストを表示しているだけです。ここに入力欄と送信ボタンを加えたいと思います。フォームのコンポーネントはこの script.js のずっと下の方にありましてこれですね。CommentForm というコンポーネントです。先程見た通りテキストが表示されているだけです。ここを input 要素にしようと思うんですがその前にまずテキストを表示するのでdiv になっていますからこちらを form に直します。閉じタグも同様ですね。そして input 要素を加えます。input 要素でまずテキスト入力フィールドですからtype は text です。そして placeholder を加えます。そして閉じます。入力欄は2つ作るのでこれをコピーしましてペーストですね。こちら、上の方は「名前」にしましてそして「コメントを入力」します。あとは送信ボタンですね。input で、type はsubmitそしてボタンの表示です。value ですね。これを「送信」と。 そしてタグを閉じます。保存しましょう。では、ローカルサーバーのsample.html ですけどもページを更新します。そうすると、入力欄が2つプレースホルダも出ていますね。そして送信ボタンと。尤も、React の送信の為のコードというのは全く書いていません。ですから、入力をして送信ボタンを押せば、デフォルトの動作はしますけれどもサーバーの方も何も準備はしていませんのでただデータが更新されて空欄に戻るというだけです。このレッスンではフォームのコンポーネントCommentForm に入力欄と送信ボタンを追加しました。これは return の中のタグですね。JSX です。ですから、普通の HTML と同じようにform の要素それから input 要素などを書き込んでいけばいいということです。

React.js入門

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

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

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

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

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