【プロゲート】React ReactIVの学習内容まとめ

React IV

1.お問い合わせフォームの確認

お問い合わせフォームを作ろう
・このレッスンでは、「学習コースⅢ」で作成したWebサイトに
「お問い合わせフォーム」を追加する
・Reactでのフォームの扱いは特徴的なので、練習しておこう

目標物を確認しよう
・Reactを使えばフォームの入力やボタンのクリックに応じてリアルタイムに表示を変えることができる

2.inputとtextarea

フォームを作ろう
・フォームの作成手順
・まずはフォームを作るところから始める

コンポーネントの構成
・学習コースⅢで作ったサイトは複数のコンポーネントからできている
・そこに新たにContactFormというコンポーネントを作成し、お問い合わせフォームを作っていく

入力欄のJSX
・今回はメールアドレスの入力欄（inputタグ）と、お問い合わせ内容の入力欄（textareaタグ）を作成する
・フォームのJSXは、HTMLと違った書き方をするので気をつける

送信ボタンのJSX
・送信ボタンはinputタグを用い、type='submit'を指定する
・また、ボタンの表示名を変更するために、value='表示名'を指定する
・こちらも/(自己クローズタグ)を忘れないように気をつける

formタグ
・フォーム全体は、<form>タグで囲む必要がある
・入力欄と送信ボタンを囲むように、<form>タグを書く

3.送信完了メッセージの作成

送信完了メッセージを作成しよう
・ではSTEP2に進もう
・フォーム送信後に表示する送信完了メッセージのJSXを準備する
・ここではstateやif文を使っていく

送信完了メッセージのイメージ
・フォームを送信すると、フォーム部分が「送信完了」というメッセージに切り替わるようにする

表示切り替えの仕組み
・フォームが送信されたかどうかをstateで管理しよう
・isSubmittedという真偽値型のstateを用意する
・最初フォームは送信されていないため、isSubmittedの初期値はfalse
・そしてisSubmittedの値によって表示を切り替える

stateと条件分岐
・学習コースⅢ で学んだように、条件分岐で表示するJSXを変更する

4.onSubmitとstateの更新

フォームとメッセージの切り替え
・最後のSTEP３に進もう
・フォームが送信されたときにメッセージが表示されるようにする

state更新のタイミング
・どうやったら送信されたときに表示を切り替えられるのかを考えてみよう
・isSubmittedの値をtrueに書き換えれば表示が変わるので、フォームが送信されたときにisSubmittedを書き換えればいい

onSubmitイベント
・フォームが送信されたときに処理を実行するには、formタグに対してonSubmitイベントを指定する

stateを更新するメソッド
・stateの値を変更するメソッドを作成し、フォームの送信時に呼び出す

5.入力値のstate管理

入力された内容をstateで管理しよう
・ここからはフォームに入力された内容（入力値）をstateで管理する
・例えば入力に合わせてエラーメッセージを表示する処理を簡単に作れるようになる
・入力値が空になったらエラーが表示されて、入力したらエラーが消える

入力値をstateで管理するステップ
・inputの入力値をstateで管理する手順
・まずはSTEP1でstateとinputの準備をしていく

stateとinputの準備
・Reactでフォームを作る場合、stateと入力値を紐づける必要がる
・メールアドレスの入力値を管理するstateのemailを用意する
・また、inputタグのvalue属性にstateの値を指定する

value属性の指定（補足）
・HTMLと同様にvalue属性に値を指定することで、指定した値を表示することができる
・そのためvalue属性にstateの値を指定すると、フォームの入力欄にstateの値が表示される

6.onChangeと入力値の取得

入力された値を取得しよう
・次はSTEP2
・フォーム入力時に処理を実行する方法（入力イベント）と、その時の入力値を取得する方法を学ぶ

onChangeイベント
・フォームの入力や削除が行われたときに処理を実行するには、onChangeイベントを用いる
・inputタグに対してonChangeイベントを指定する

入力値の取得
・入力値の取得は、onChangeイベントの関数にeventという引数を追加し、event.target.valueとすると取得できる
・本レッスンでは詳しく理解する必要はないので、eventとevent.target.valueはセットで覚えておく

7.stateの更新

stateを更新しよう
・STEP3
・入力値を取得できたらその入力値でstateを更新すれば完成
・setStateを使う

stateを更新するメソッド
・handleEmailChangeメソッドをつくりstateの変更を行う
・メソッドにeventを渡していることに注目
・こうすることでメソッド内で入力値を取得できる

8.エラーメッセージの作成

入力チェックをしよう
・それではいよいよ、エラーメッセージの表示に取り組んでいく
・入力値に不正がないかを確認する仕組み

入力値が空かどうかを管理する
・入力値が空かどうかの状態をstateで管理しよう
・stateに新たにhasEmailErrorという真偽値型のstateを定義する
・表示を切り替えられるようにしていく

stateと条件分岐
・hasEmailErrorがtrueのとき、変数emailErrorTextにエラー部分のJSXを代入し表示するようにする

9.onChangeと入力チェック

エラーメッセージを表示しよう
・メールアドレスを空にしてもエラーメッセージが表示されない
・stateのhasEmailErrorの値が変更される仕組みがないから
・STEP2とSTEP3
・入力が空かどうかのチェックとstateの更新を行う

入力値が空かどうかの判定
・メールアドレスの入力値が空かどうかを判定するために、handleEmailChangeメソッドに処理を追加する

複数のstateの同時更新
複数のstateを更新する場合、コンマ(,)で区切り一度のsetStateでまとめて変更する

10.お問い合わせ内容のstate管理

お問い合わせ欄もstateで管理しよう
・これで本当に最後
・復習もかねてお問い合わせ欄も入力値の管理と入力チェックができるようにする

入力値の管理と入力チェック
・お問い合わせ欄の入力値もstateで管理し、入力チェックも行う
・メールアドレス欄と同じように、入力値が空であればエラーを表示する

2つのstateと入力値の表示
・お問い合わせ欄の入力値を管理するcontentと、入力値が空かどうかを管理するhasContentErrorという2つのstateを用意する
・textareaタグでもvalue属性にstateの値を指定することで入力値を表示できる

onChangeとstateの更新
・textareaタグのonChangeイベントでメソッドを呼び出し、2つのstateを更新する
・eventを引数に渡し、event.target.valueで入力値を取得する

エラーメッセージ
・hasContentErrorと条件分岐を用いてエラーメッセージを表示する