入力チェックをしよう ~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の同時更新を行う
メールアドレスを入力してくださいと表示されたら成功!
今回は以上です。お疲れ様でした。