Reactは、ウェブアプリケーションを作るための人気のあるライブラリです。今回は、Reactでのイベントハンドリングについて学びます。イベントハンドリングとは、ユーザーの操作（クリックや入力など）に応じてプログラムが反応する仕組みのことです。

イベントハンドリングの基本

まず、Reactではイベントを処理するために、イベントハンドラーという関数を作ります。これが、ユーザーのアクションに応じて何かを実行する部分です。例えば、ボタンをクリックしたときにメッセージを表示する場合を考えてみましょう。

ボタンのクリックイベント

以下のコードは、ボタンをクリックするとアラートが表示される簡単な例です。

import React from 'react';

function App() {
  const handleClick = () => {
    alert('ボタンがクリックされました！');
  };

  return (
    クリックしてね
  );
}

export default App;

ここでは、ボタンがクリックされるとhandleClick関数が呼ばれ、アラートが表示されます。これがReactでのクリックイベントの基本的な仕組みです。

フォームの入力イベント

次に、フォームの操作について見ていきましょう。特に、ユーザーがテキストを入力する際のイベントを扱います。

テキスト入力の管理

以下の例では、テキスト入力フィールドの内容を管理し、その内容を画面に表示します。

import React, { useState } from 'react';

function App() {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    

      
      
入力したテキスト: {inputValue}
    
  );
}

export default App;

ここでは、useStateフックを使って、inputValueという状態を定義しています。ユーザーがテキストフィールドに入力すると、handleChange関数が呼ばれ、適切に状態が更新されます。このようにして、リアルタイムで入力内容を反映させることができます。

まとめ

Reactのイベントハンドリングは非常に強力で、ユーザーのアクションに対して柔軟に反応することができます。クリックイベントやフォーム操作の基本を理解することで、よりインタラクティブなアプリケーションを作成できるようになります。これからも様々なイベントハンドリングを試して、Reactの使い方をマスターしていきましょう！