• はじめに このセクションでは、Reactでクラスコンポーネントのイベント処理について学びましょう。Reactは、ユーザーインターフェースを構築するための人気のあるJavaScriptライブラリです。クラスコンポーネントは、Reactでコンポーネントを作成する方法の1つであり、その中でイベントを処理することは重要なスキルです。GeekとGalのお手伝いを借りて、さっそく取り組んでいきましょう！
Gal Normal

Reactのクラスコンポーネントって知ってる？

Geek Curious

聞いたことはあるけど、あまり詳しくないんだ。クラスコンポーネントでイベントをどうやって処理するのか教えてもらえる？

Gal Happy

もちろん！クラスコンポーネントは、ES6のクラスを使って作成されるの。クラスコンポーネントでイベントを処理するには、イベントハンドラーメソッドを定義して、コンポーネントのインスタンスにバインドするのよ。

  • クラスコンポーネントでのイベント処理
Gal Pleased

ここに、ボタンを含むクラスコンポーネントの例があるわ。ボタンがクリックされると、テキストが変わるのよ！

import React, { Component } from 'react';

class ButtonClick extends Component {
    constructor(props) {
        super(props);
        this.state = { text: 'Click the button!' };

        // イベントハンドラーのバインド
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        this.setState({ text: 'Button clicked!' });
    }

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

export default ButtonClick;
Geek Happy

なるほど！クラスコンポーネントの中に"handleClick"というイベントハンドラーメソッドを定義して、コンストラクタでバインドするんだね。そして、"onClick"を使ってイベントハンドラーをボタンにアタッチするのか！

Gal Happy

そのとおり！これで、ボタンがクリックされると、"handleClick"メソッドが呼び出されて、テキストが変わるわ。

  • おもしろい例
Geek Curious

クラスコンポーネントとイベント処理を使った面白い例はどんなものがある？

Gal Pleased

クリックするとテキストがランダムなメッセージに変わるボタンはどう？それを作ってみましょう！

import React, { Component } from 'react';

class RandomMessage extends Component {
    constructor(props) {
        super(props);
        this.state = { message: 'Click the button for a random message!' };

        // イベントハンドラーのバインド
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        const messages = ['Hello!', 'Howdy!', 'Greetings!', 'Hey there!', 'Hi!'];
        const randomIndex = Math.floor(Math.random() * messages.length);
        this.setState({ message: messages[randomIndex] });
    }

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

export default RandomMessage;
Geek Happy

ハハ、すごいね！ボタンをクリックするとランダムなメッセージが表示されるコンポーネントを作ったんだ！

Gal Happy

楽しんでもらえてうれしいわ！クラスコンポーネントとイベント処理を使って、インタラクティブなReactコンポーネントを作成する練習を続けてね！

  • おわりに クラスコンポーネントでのイベント処理は、Reactを使って作業する上で重要なスキルです。イベントハンドラーメソッドを定義し、それらをバインドして、イベントリスナーを使って要素にアタッチすることで、インタラクティブでダイナミックなコンポーネントを作成できます。学び続けて、素晴らしいウェブアプリを構築しましょう！😄