React のイベント処理を使用すると、クリック、フォーム送信、その他のイベントなどのユーザー インタラクションに応答できます。基本的な概要と例は次のとおりです:

基本概念

1. イベント バインディング: React では、通常、イベント名にキャメルケースを使用します (例: onClick、onChange)。
2. イベント処理: JSX で関数をイベント ハンドラーとして直接渡すことができます。
3. 合成イベント: React は、ブラウザ間の互換性を確保するために、ネイティブ イベントを合成イベントにラップします。

例

ボタンのクリックと入力変更を処理する簡単な例を次に示します:

import React, { useState } from 'react';

const EventHandlingExample = () => {
  const [inputValue, setInputValue] = useState('');

  const handleClick = () => {
    alert(`Button clicked! Input value: ${inputValue}`);
  };

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

  return (
    

      
      Click Me
    
  );
};

export default EventHandlingExample;

重要なポイント

• 状態管理: useState を使用して機能コンポーネントの状態を管理します。
• イベント オブジェクト: イベント ハンドラーは、イベントに関する情報を含むイベント オブジェクトを受け取ります。
• Prevent Default: イベントのデフォルト動作 (フォーム送信など) を防止するには、event.preventDefault() を使用します。

具体的な例や詳しい説明が必要な場合はお気軽にお問い合わせください。