React でのイベント処理日

「30 日間の ReactJS」シリーズの 6 日目へようこそ!今日は、React でのイベントの処理について詳しく説明します。イベント処理を理解することは、インタラクティブでユーザーフレンドリーなアプリケーションを作成するために非常に重要です。

イベント処理とは何ですか?

React のイベント処理を使用すると、クリック、フォームの送信、キーボード入力などのユーザー アクションに応答できます。 React では、イベントはプレーンな HTML/JavaScript で処理する方法と似た方法で処理されますが、React の宣言モデルに適合するいくつかの重要な違いがあります。

React イベント処理の基本

React では、イベント ハンドラーは props として React 要素に渡されます。プレーン HTML とは異なり、React イベント ハンドラーは小文字の代わりにキャメルケース構文を使用します。たとえば、onclick の代わりに onClick を使用します。

例: 基本的なボタン クリック ハンドラー

import React from 'react';

function ClickButton() {
  const handleClick = () => {
    alert('Button was clicked!');
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
}

export default ClickButton;

この例では、ボタンをクリックすると handleClick 関数が実行され、アラートが表示されます。

実際の例: ATM 機
PIN を入力して引き出す金額を選択する ATM 機を想像してください。ボタンを押すたびに (数字の入力や引き出し金額の選択など)、イベントがトリガーされます。 React では、イベント ハンドラーを使用してこれらのインタラクションを処理します。

イベントオブジェクト

React イベント ハンドラーはイベント オブジェクトを引数として受け取ります。このオブジェクトには、ターゲット要素やイベントのタイプなど、イベントに関する情報が含まれています。

例: 入力変更の処理

import React, { useState } from 'react';

function InputForm() {
  const [value, setValue] = useState('');

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

  return (
    <div>
      <input type="text" value={value} onChange={handleChange} />
      <p>You typed: {value}</p>
    </div>
  );
}

export default InputForm;

ここで、handleChange 関数は入力値で状態を更新し、入力された内容をリアルタイムで確認できるようにします。

バインディング イベント ハンドラー

クラス コンポーネントでは、多くの場合、イベント ハンドラーをコンポーネント インスタンスにバインドする必要があります。関数は自動的にバインドされるため、フックを備えた機能コンポーネントではこれは必要ありません。

例: クラスコンポーネントでのバインディング

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    console.log('Button clicked');
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

バインディングにより、これがイベント ハンドラー内のコンポーネント インスタンスを参照することが保証されます。

Vite によるイベント処理

開発ツールとして Vite を使用すると、イベントの処理が簡単になります。 Vite の高速更新により、変更をすぐに確認できるため、イベント ハンドラーのテストとデバッグが容易になります。

まとめ

イベントの処理は、アプリケーションがユーザー インタラクションに応答できるようにする React の基本的な側面です。イベント ハンドラーを要素にアタッチすると、アプリを動的かつインタラクティブにすることができます。

明日は、これに基づいて最初の ReactJS アプリの構築を検討し、イベント処理が完全なアプリケーションにどのように統合されるかを確認します。

以上がReact でのイベント処理日の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。