Reactでテキスト入力の変更イベントを処理する方法

まず、Reactのテキスト入力コンポーネントを作成します。以下は、基本的なテキスト入力コンポーネントの例です。

import React, { useState } from 'react';
const TextInput = () => {
  const [text, setText] = useState('');
  const handleChange = (event) => {
    setText(event.target.value);
  };
  return (
    <input type="text" value={text} onChange={handleChange} />
  );
};
export default TextInput;

上記のコードでは、useStateフックを使用してtextステート変数を定義し、setText関数を使用してその値を更新します。handleChange関数は、テキスト入力の値が変更されるたびに呼び出され、setTextを使用してtextステート変数を更新します。

このテキスト入力コンポーネントを使用すると、親コンポーネントで以下のように呼び出すことができます。

import React from 'react';
import TextInput from './TextInput';
const App = () => {
  const handleTextChange = (text) => {
    console.log('入力されたテキスト:', text);
    // ここで適切な処理を行う
  };
  return (
    <div>
      <h1>Reactテキスト入力の変更イベント処理</h1>
      <TextInput onChange={handleTextChange} />
    </div>
  );
};
export default App;

上記のコードでは、handleTextChange関数を作成し、テキストの変更があるたびに呼び出されるようにTextInputコンポーネントに渡しています。この関数内で、適切な処理（例えば、テキストのバリデーションや他のコンポーネントとの連携）を行うことができます。

このようにして、Reactでテキスト入力の変更イベントを処理する方法を簡単かつシンプルに実装することができます。この方法を使えば、ユーザーの入力に対して柔軟な処理を行うことができます。