React.js入門

送信するデータを確認する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フォームのデータを、送信する前に簡単に確認します。
講師:
04:35

字幕

このレッスンではフォームのデータをサーバーに送る前にそのデータに問題がないか簡単に確かめる方法についてご説明します。このテキスト入力フィールドに入力して「送信」ボタンを押すとデータが送られます。けれども、例えば2つ欄があるのですが1つだけしかデータが入っていません。それでも送れてしまうんですね。あるいは、もっと言えば空のまま送ってしまうこともできるわけです。空のデータが送られたかどうかちょっと見にくかったと思いますのでデータを送った先のcomments.json のファイルを開きました。そうすると、こちらは片方しかデータが入っていない場合それから、空のまま送信ボタンを押すとやはり、空のままデータが送られてjson ファイルに追加されています。これは、ちょっと消してしまいましょう。そして、保存します。script.js の方に移って送信する際の処理を少し手を加えましょう。この handleSubmit はCommentForm のコンポーネントに定義されていますけれどもこの中でデータを2件取り出してそして、送信のメソッドに送っているという事なんですがその前に、チェックを加えましょう。このコメントの所は消してしまってif 文です。 どんな風にチェックをするかという事なんですがこの author という変数に入っているテキストはもし、この中に全くデータが無い場合文字が無い場合にはこの if 文の判定はfaulse になります。一文字でも入っていればtrue になります。ということなので、ここで ! を入れてtrue と faulse を反転させます。こうすると空の場合には true となります。同じように|| で text ですね。これもコピーを持ってきて空っぽだったら true とします。どちらかが空っぽであればこの if 条件の判定が true となります。そうしたら return です。これで、この先に進みません。ここで終わってしまいます。ですから、これ以上サーバーに送るという処理に結びつかないという事になります。もっとも、空かどうかという判定だけですと単に、空白スペースを入れた場合でも空でないという判定になってしまいます。ですから、ここでこの文字列に対してtrim というメソッドを呼び出します。これは、テキスト本体の両サイドにある空白スペースを削ってしまいます。ですから、もし空白スペースしかない場合には空になります。 ということで、こちらも同様にtext の方も trim ということでこれで、とりあえず片方にしかデータが入っていない場合、あるいは全くデータが入っていない場合、もう1つ、空白しか入っていない場合も全て、はねられることになります。では、保存しましょう。ローカルサーバーのページをリロードします。まず、全く何も入っていない場合送られていません。後で json ファイルの方も確認しましょう。それから片方にしかデータが入っていない場合も送られないです。じゃあ、こちら全角スペース2つです。送られません。しょうがないので、ちゃんと入れます。そうすると、データが送信されて加わりました。comments.json のファイルを見ても追加されたのは最後に正しく2つともデータを入れたこの部分だけですね。ということで、正しく判定がされたようです。このレッスンではサーバーにデータを送る前にテキスト入力フィールドのデータを確認してもし、問題がある場合には先に進まない、サーバーに送らないという処理についてご説明をしました。その場合、変数に入っているテキストに! をつけることによって「空の場合には」ということになります。 その場合には処理を終える return ですね。あと trim によって「データテキストの両サイドにあるスペースを削る」ということも加えました。

React.js入門

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

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

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

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

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