[React]入力フォームでフォーカスが外れたらエラーメッセージを出す、他
2023/12/07 (木) - 00:00 JavaScript
Reactでフロントを構築している入力フォームなどで、入力フォームでフォーカスが外れたら「入力されていません」などのメッセージを出したい時。単純にonBlurイベントハンドラで関数を指定すればいいだけのようです。
import React, { useState } from 'react';
function InputTextbox() {
const [InputName, setInputName] = useState('');
const [formErr, setformErr] = useState('');
const onChange = (e) => {
setInputName(e.target.value);
};
const onBlur = (e) =>{
//ここで何かしらの処理判定
if(!e.target.value){
setformErr('入れてね');
}else{
setformErr('');
}
}
return(
<form>
<label htmlFor="name">お名前：
<input id="name" name="name" type="text" placeholder="お名前を入れてください" value={InputName} onChange={onChange} onBlur={onBlur} required />
<em>{formErr}</em>
</label>
</form>
);
}
export default InputTextbox;例では未記入の場合はエラーを出すですが、これを応用して「郵便番号の書式になっていなかったらエラーを出す」「電話番号の桁が間違っていたら警告を出す」等の処理を噛ませばいいと思います。
おまけ：入力中に文字を処理する
onChangeイベントでもリアルタイムに文字を処理することが出来ます。以下の例ではメールアドレスで使えない文字が入ったら除去するみたいなやつです。
import React, { useState } from 'react';
function InputEmailbox() {
const [InputEmail, setInputEmail] = useState('');
const onChange = (e) => {
//ここで何かしらの処理
const mailStr = e.target.value.replace(/[^@_/.-0-9a-z]/gi, ''); //英数記号以外の文字は除去
//stateを更新
setInputEmail(mailStr);
};
return(
<form>
<label htmlFor="email">メールアドレス：
<input id="email" name="email" type="email" placeholder="メールアドレスを入れてください" value={InputEmail} onChange={onChange} required />
<em>{formErr}</em>
</label>
</form>
);
}
export default InputEmailbox;おまけ：クレジットカード番号の入力支援
4111111111111111という風に文字入力すると、4111 1111 1111 1111とスペースで区切られます。
import { useState } from "react";
function InputCreditCard() {
const [value,setValue] = useState('');
const onChange = (e) => {
const inputValue = e.target.value.replace(/[^0-9]/g, '').match(/.{1,4}/g);
const inputValueJoin = inputValue ? inputValue.join(' ') : '';
setValue(inputValueJoin);
}
return (
<div>
<input id="ccn" name="ccn" type="tel" maxLength="19" value={value} onChange={onChange} />
</div>
);
}
export default InputCreditCard;
