ユーザー イベントを使用する

完了

イベントを使用すると、自分のアプリケーションに対するユーザー操作に応答するコードを実行できます。 JSX は JavaScript、XML、HTML 上に構築されているため、比較的馴染み方法でイベント リスナーを追加できることでしょう。

処理するイベントの名前を示すために、HTML に属性を追加します。 たとえば、alert を使用してボタンが選択されたときにメッセージを表示する場合は、次のコードを使用します。

class Demo extends React.Component {
    render() {
        <button onClick={ () => alert('Hello, world!') }>Click me!</button>
    }
}

お考えのとおり、イベントをリッスンする関数を作成することもできます。 コンポーネントに関数を追加します。 次に、alert で使用したのと同じ構文を使用してそれを呼び出します。

class Demo extends React.Component {
    displayMessage() {
        alert('Hello, world!');
    }

    render() {
        <button onClick={ () => displayMessage() }>Click me!</button>
    }
}

必要に応じて、イベント ハンドラーにパラメーターを渡すこともできます。

class Demo extends React.Component {
    displayMessage(message) {
        alert(message);
    }

    render() {
        <button onClick={ () => displayMessage('Clicked button!') }>Click me!</button>
    }
}