【React】onClickでのイベント処理(ハンドリング) 方法を丁寧に解説

2024-01-11

当サイトでは一部リンクに広告が含まれています

プログラミングにおけるイベントは、ユーザーがボタンをクリックする、フォームを送信する、マウスを動かすなどのアクションを指します。
これらのアクションは、アプリケーションがユーザーと対話するための基本的な手段となります。

特に、ウェブアプリケーションでは、これらのイベントを効果的に扱うことが重要となります。

そしてReact.jsは、このようなユーザーイベントを扱うための強力なツールを提供しており、イベント処理を簡単に行うことができます。

この記事では、Reactにおけるイベント処理の基本について説明します。
イベントハンドラの設定方法から、よく使われるイベントの例、そしてthisキーワードの取り扱いまで、一緒に学んでいきましょう！

Reactにおけるイベント処理の詳細

ウェブアプリケーションにおける動的な振る舞いは、ユーザーの行動をイベントとして捉え、それに反応することで実現されます。

Reactにおけるイベント処理はJavaScriptのイベント処理と基本的には同じですが、いくつか異なる部分もあります。

それでは、Reactにおけるイベント処理の詳細について解説していきます。

Reactにおけるイベントハンドラとイベントオブジェクト

Reactにおけるイベントハンドラは、イベントが発生したときに実行される関数を指します。

この関数は、通常イベントオブジェクトを引数として受け取ります。イベントオブジェクトは、発生したイベントの詳細情報を持つオブジェクトで、例えばマウスクリックイベントの場合、クリック位置の座標などが含まれます。

Reactでは、イベントハンドラをHTML要素の属性として設定します。これらの属性名はキャメルケースで表記されます。

例えば、ボタン要素にonClickというイベントハンドラを設定する場合、以下のように書くことができます。

function doSomething() {
  // do something when the button is clicked
}

<button onClick={doSomething}>Click me!</button>

この例では、ボタンをクリックするとdoSomethingという関数が実行されます。

また、ReactのイベントオブジェクトはJavaScriptのイベントオブジェクトとほぼ同じですが、全てのブラウザで一貫した振る舞いをするようにReact側で一部修正が加えられています。

Reactにおけるイベント処理の具体例：onClick

ここでは具体例として、ユーザーが要素をクリックしたときに発生するonClickイベントについて詳しく解説します。

以下は、ボタンをクリックしたときにアラートを表示する基本的な例です。

function handleClick() {
  alert('You clicked the button!');
}

<button onClick={handleClick}>Click me!</button>

この例では、handleClick関数がイベントハンドラとして定義され、onClickイベントに紐づけられています。

また、1つの要素に複数のonClickハンドラを設定することはできませんが、1つのハンドラ内で複数の動作を実行することは可能です。

function handleClick() {
  alert('You clicked the button!');
  console.log('Button click event handled.');
}

<button onClick={handleClick}>Click me!</button>

この例では、ボタンがクリックされると、まずアラートが表示され、その後でコンソールにメッセージが出力されます。

onClickイベントが反応しないときは、以下の原因が考えられます。

イベントハンドラが正しく定義されていない。
イベントハンドラが正しくReact要素に紐づけられていない。
JavaScriptのエラーが発生している。

それぞれの問題に対応するためには、以下のような手順で解決を試みます。

ハンドラ関数が正しく定義されていることを確認します。関数の内部でconsole.logを使用して、関数が呼び出されていることを確認します。
React要素にハンドラ関数が正しく紐づけられていることを確認します。関数名が正しいか、そして関数が中括弧 {} で囲まれていることを確認します。
ブラウザの開発者ツールのコンソールでJavaScriptのエラーがないことを確認します。

また、イベントハンドラの設定においてよく見られる間違いの一つは、関数を呼び出してしまうことです。

以下のような書き方は間違いです。

// Incorrect
<button onClick={doSomething()}>Click me!</button>

上記のコードでは、doSomething関数はページがレンダリングされるときに呼び出されます。つまり、ボタンをクリックしたときではなく、ページがレンダリングされるときにdoSomethingが実行されます。

正しくは、関数を呼び出さずに関数自体をイベントハンドラとして設定します。つまり、関数名の後に括弧をつけずに以下のように書きます。

// Correct
<button onClick={doSomething}>Click me!</button>

ただし、イベントハンドラに引数を渡す必要がある場合は、アロー関数を使用して呼び出すことができます。

function doSomethingWithArg(arg) {
  // do something with arg
}

<button onClick={() => doSomethingWithArg("Hello")}>Click me!</button>

上記のコードでは、アロー関数がonClickイベントに対して設定され、ボタンをクリックするとそのアロー関数が呼び出されます。そして、そのアロー関数の内部でdoSomethingWithArg関数が引数”Hello”と共に呼び出されます。

Reactにおけるイベント処理とthis

一部の人々にとって、JavaScriptのthisキーワードは混乱の元であり、Reactのイベントハンドラにおけるthisの振る舞いは特に注意を要します。

クラスコンポーネントにおいて、イベントハンドラはデフォルトではコンポーネントのインスタンスにバインドされません。そのため、thisをイベントハンドラ内で使用する場合は、ハンドラをコンポーネントのインスタンスに手動でバインドする必要があります。

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

  handleClick() {
    console.log('Button clicked. this is:', this);
  }

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

上記のコードでは、コンストラクタ内でhandleClickメソッドをthisにバインドしています。

しかし、イベントハンドラを毎回バインドするのは面倒です。この問題を解決するために、JavaScriptのパブリッククラスフィールド構文を使用してイベントハンドラを定義することができます。この方法では、イベントハンドラは自動的にインスタンスにバインドされます。

class MyButton extends React.Component {
  handleClick = () => {
    console.log('Button clicked. this is:', this);
  }

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

この例では、handleClickメソッドはアロー関数として定義されており、thisは自動的にコンポーネントのインスタンスにバインドされます。

また、関数コンポーネントではthisキーワードは存在せず、代わりにフックを使用してローカル状態や副作用を管理します。したがって、関数コンポーネントにおけるイベントハンドラではthisについて心配する必要はありません。

Reactにおける他の重要なイベント

onClickの他にもReactでは多くのイベントがサポートされています。それらについて基本的な使い方と例を示します。

onChange

onChangeイベントは、ユーザーが入力要素の値を変更したときに発生します。これは、テキストボックスの入力値を監視するのに特に有用です。

function handleInputChange(event) {
  console.log('Input changed to:', event.target.value);
}

<input type="text" onChange={handleInputChange} />

上記のコードでは、テキストボックスの値が変更されるたびに、新しい値がコンソールに出力されます。

onSubmit

onSubmitイベントは、ユーザーがフォームを送信したときに発生します。通常は、送信ボタンのクリックイベントではなく、このonSubmitイベントを使ってフォームの送信を処理します。

function handleSubmit(event) {
  event.preventDefault();
  console.log('Form submitted.');
}

<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>

上記のコードでは、フォームが送信されるとhandleSubmit関数が呼び出され、デフォルトのフォーム送信処理がevent.preventDefault()によって抑止され、”Form submitted.”がコンソールに出力されます。

以上のように、Reactにおけるイベント処理はJavaScriptのイベント処理と基本的に同じですが、いくつかのReact独自の特性とベストプラクティスがあります。これらを理解していくことで、Reactアプリケーションのインタラクティブな振る舞いをより効率的に、より安全に実装することができます。