shinoblog-manabu

Progate(プロゲート)を使って初歩の初歩からプログラミング勉強をはじめました。無料から有料バージョンへ以降しつつ、自分辞書として活用しています。なるべく私と同じ初心者目線を使い、各プログラミング内容を説明したいです。

入力チェックをしよう ~Reactを使ってお問い合わせページをつくる~

aitojyounetu
(Lv.182)
React 学習レッスン IV入力チェックをしよう8. エラーメッセージの作成 より

https://prog-8.com/react/study/4/8#/24

 

目的

入力チェックをして、入力が空かどうかのチェックとstateの更新を行おう。

 

目標

Eメールアドレス未入力の場合、エラーメッセージを出力・表示させること


入力値が空かどうかを管理する
入力値が空かどうかの状態はstateで管理できる


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

Q.具体的にどうするのか?
stateのemailの下に、stateのhasEmailErrorを追加する
図1
class ContactForm extends React.Component {
  constructor(props) {
    super(props) {
    this.state = {
      isSubmitted: false,
      email: '',
      hasEmailError: false,
    };
  }

 

エラー部分のJSXとは?
2つある

1つめ
○ポイント
・renderメソッドの中で、変数emailErrorTextを定義
・「this.state.hasEmailErrorがtrueのときに」という条件を追加

 

図2
render() {
  let emailErrorText;
  if (this.state.hasEmailError) {
    emailErrorText = (
      <p className='contact-message-error'>
        メールアドレスを入力してください
      </p>
     );
  }


2つめ
・this.state.hasEmailErrorがtrueのときに、
変数emailErrorTextにエラーメッセージのJSXを代入する

図3
{emailErrorText}

 

ヒント
"~を定義する" 場合、let ~ と入力する

 

 


入力値が空かどうかの判定

上記はクリアした。しかし、メールアドレスを空にした状態で送信ボタンを押してもエラーメッセージがでない!!

それなら、エラーメッセージを出力させようではないか。

 

 

具体的にどうするのか

1.入力値が空かどうかのチェックをする

2.stateの更新をする

 

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

 

※処理コード

handleEmailChange(event){
  const inputValue = event.target.value;
  const isEmpty = inputValue ==='';
}

<input
  value={this.state.email}
  onChange={(event) => {this.handleEmailChange(event)}}
/>

 

 

 

2.stateの更新をする

複数のstateの同時更新

複数のstateを更新する場合、コンマ(,)で区切る。
次に一度のsetStateにおいて、まとめて変更する。

 

ポイント
・handleEmailChangeメソッドの中で、定数isEmptyを定義
・定数isEmptyに、inputValue === ''の結果を代入
・handleEmailChangeメソッドの中で、stateのemailを更新
・handleEmailChangeメソッドの中で定数isEmptyを用い、
stateのhasEmailErrorを更新

 

↓つまり以下のコードを指す

  this.setState({
    email: inputValue,
    hasEmailError: isEmpty,

 

※複数回setStateを使う場合

handleEmailChange(event){
  const inputValue = event.target.value;
  const isEmpty = inputValue === '';
  this.setState({email: inputValue});
  this.setState({hasEmailError: isEmpty});
}

 

※一度だけsetStateを使う場合

handleEmailCharenge(event) {
  const inputValue = event.target.value;
  const isEmpty = inputValue === '';
  this.setState({
    email: inputValue,
    hasEmailError: isEmpty,
  });
}

 

注意

今回は、、一度だけsetStateを使う場合のstateの同時更新を行う

 

 

 

メールアドレスを入力してくださいと表示されたら成功!

一度文字を入力し、一度入力文字を消す。すると赤い文字"メールアドレスを入力してください"と警告メッセージが出る。これが成功の証



 

今回は以上です。お疲れ様でした。