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

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

Reactでのchangeイベントの処理をTypeScriptを使って実装する方法を以下に示します。

例: フォーム入力の処理

この例では、ユーザーが入力フィールドにテキストを入力したときに、入力内容を状態として管理するシンプルなフォームを作成します。

import React, { useState, ChangeEvent } from 'react';

const MyForm: React.FC = () => {
  const [inputValue, setInputValue] = useState<string>('');

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

  return (
    <div>
      <label htmlFor="my-input">入力:</label>
      <input
        id="my-input"
        type="text"
        value={inputValue}
        onChange={handleChange}
      />
      <p>入力内容: {inputValue}</p>
    </div>
  );
};

export default MyForm;

説明

• useStateフックを使用してinputValueという状態を管理しています。
• handleChange関数がChangeEvent型のイベントを受け取り、setInputValueを使って状態を更新します。
• input要素のonChangeプロパティにhandleChange関数を渡し、ユーザーの入力をリアルタイムで反映します。

このコードは、基本的なchangeイベントの処理をReactとTypeScriptで実装する方法を示しています。