Reactで文字のみの正規表現バリデーションを行う方法

まず、Reactコンポーネントの状態に、入力フィールドの値を保持するstate変数を追加します。

import React, { useState } from 'react';
function MyForm() {
  const [inputValue, setInputValue] = useState('');
  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleInputChange} />
      {/* ここにバリデーションエラーメッセージを表示するコンポーネントを追加することもできます */}
    </div>
  );
}
export default MyForm;

次に、正規表現を使用して入力値をバリデーションする関数を作成します。文字のみで構成されているかどうかをチェックするために、/^[a-zA-Z]+$/の正規表現を使用します。

function validateInput(inputValue) {
  const regex = /^[a-zA-Z]+$/;
  return regex.test(inputValue);
}

最後に、入力フィールドの値をバリデーションするために、handleInputChange関数内でvalidateInput関数を呼び出します。

const handleInputChange = (event) => {
  const inputValue = event.target.value;
  const isValid = validateInput(inputValue);

  if (isValid) {
    setInputValue(inputValue);
  }
};

これで、Reactで文字のみの正規表現バリデーションを行う方法が分かりました。必要に応じて、バリデーションエラーメッセージを表示するためのコンポーネントを追加することもできます。また、正規表現パターンを変更することで、他のバリデーションルールにも対応できます。