Reactでblurイベントの処理を実装

Reactでblurイベントの処理を実装

Reactでblurイベントを処理する例をTypeScriptで示します。
以下のコードは、入力フィールドがフォーカスを失ったときにblurイベントが発生するシンプルなコンポーネントです。

import React, { useState } from 'react';

const BlurExample: React.FC = () => {
  const [value, setValue] = useState<string>('');

  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
    console.log('入力フィールドがフォーカスを失いました');
    // フォーカスを失ったときの処理をここに書きます
    alert(入力フィールドの値: ${event.target.value});
  };

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={handleChange}
        onBlur={handleBlur}
        placeholder="テキストを入力してください"
      />
    </div>
  );
};

export default BlurExample;

このコンポーネントでは、input要素にonBlurイベントハンドラーを設定しています。
ユーザーが入力フィールドからフォーカスを失ったときに、handleBlur関数が呼び出され、入力フィールドの値がアラートとして表示されます。
console.logでメッセージを出力することで、blurイベントが発生したことも確認できます。