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;

おしまい♥

タグ：React