【React】イベントを登録する方法

2022年11月25日React

Reactでイベントを登録する方法を紹介します。

【React】イベントを登録する方法(クリックイベント)

const Sample = () => {
  const clickAction = () => {
    alert("clickされました");
  };
  return (
    <>
      <button onClick={clickAction}>クリック</button>
    </>
  );
};

export default Sample;

名前付きの関数にして、onClick(Cが大文字という点に注意！)にイベントを登録することができます。

【React】イベントを登録する方法(inputイベント)

const Sample = () => {
  return (
    <div>
      <h3>コンソールを確認してください。</h3>
      <label>
        入力値のイベント：
        <input
          type="text"
          onChange={() => console.log("変更された")}
          onBlur={() => console.log("フォーカル外れた")}
          onFocus={() => console.log("フォーカスされた")}
        />
      </label>
	<input type="text" onChange={(e) => console.log(e.target.value)} />
    </div>
  );
};

export default Sample;

inputのときによく使うものに上の3つがあります。
onChangeでは、変更するたびに発火します。
onBlurはフォーカスが外れたときに発火します。
onFocusはフォーカスされたときに発火します。

onChangeの注意点

ReactのonChangeだけ、JavaScriptのイベントでいうoninputイベントとなります。
JavaScriptのonchangeイベントは、値を入力してフォーカスを失ったときに発火するものですが、
oninputは値が変更された時に発火します。Reactの場合、onChangeがoninputと同じになる点に注意が必要です。

【React】イベントを登録する方法(hoverイベント)

const Sample = () => {
  return (
    <div>
      <h3>コンソールを確認してください。</h3>
      <div
        className="hoverArea"
        onMouseEnter={() => console.log("カーソルが入った。")}
        onMouseLeave={() => console.log("カーソルが出た。")}
      >
        ホバー
      </div>
    </div>
  );
};

export default Sample;

上のように、JavaScriptのイベントmouseenterやmouseleaveと同じものがあり、
JavaScriptを知っていればだいたいわかります。