React イベント
HTMLのDOMイベントと同様に、Reactはユーザーイベントに基づいてアクションを実行できます。
ReactにはHTMLと同じイベント(クリック、変更、マウスオーバーなど)があります。
イベントの追加
ReactイベントはcamelCase構文で記述されます。
onclickの場合はonClickと記述します。
Reactイベントハンドラーは、中括弧内に記述します。
onClick="shoot()"の場合はonClick={shoot}と記述します。
反応:
<button onClick={shoot}>Take the Shot!</button>
HTML:
<button onclick="shoot()">Take the Shot!</button>
例：
Footballコンポーネントの中にshoot関数を入れます。
function Football() {
const shoot = () => {
alert("Great Shot!");
}
return (
<button onClick={shoot}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
引数を渡す
イベントハンドラーに引数を渡すには、アロー関数を使用します。
例：
shoot関数のパラメータとして、アロー関数を使用し"Goal!" を表示させます。
function Football() {
const shoot = (a) => {
alert(a);
}
return (
<button onClick={() => shoot("Goal!")}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
Reactイベントオブジェクト
イベントハンドラーは、関数をトリガーしたReactイベントにアクセスできます。
この例では、イベントは「クリック」イベントです。
例：
アロー関数:イベントオブジェクトを手動で送信する。
function Football() {
const shoot = (a, b) => {
alert(b.type);
/*
'b' represents the React event that triggered the function,
in this case the 'click' event
*/
}
return (
<button onClick={(event) => shoot("Goal!", event)}>Take the shot!</button>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Football />);
これは、後の章でフォームについて説明するときに役立ちます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。