React イベントハンドラの扱い方(onClick/onChange)

Question

実現したいこと

onClick/onChangeイベントを呼び出すときにアロー関数でラップすべきか？否か

• Reactクリックイベント onClick={()=>handleClickTab(0)}
• React入力イベント onChange={handleChange}

前提

ボタン操作によるタブの切り替え表示、入力値を画面に反映する。
2つの機能を実装しています。
イベントハンドラの呼び出し方について、
アロー関数でラップする/しないの判断基準を教えてほしいです。

クリックイベントハンドラをアロー関数でラップして実行している

export default function App() {
  // useStateでタブの状態を管理、初期値は0
  const [activeTab, setActiveTab] = useState(0);

  const handleClickTab = (index) => {
    setActiveTab(index);
  };

  return (
    <div className="tab" role="tab">
      <div className="tab-list" role="tablist">
        <button 
          onClick={() => handleClickTab(0)}
          className={clsx({ active: activeTab === 0 })}
        >
          タブ1
        </button>
      {activeTab === 0 && (
        <div className="tab-panel">ここにタブ1のコンテンツが入ります。</div>
      )}
    </div>
  );
}

入力イベントはonChangeでそのまま呼び出し(アロー関数でラップしない)

export function App() {
  const [text, setText] = useState("");

  const handleChange = (e) => {
    setText(e.target.value);
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        placeholder="テキストを入力"
        onChange={handleChange}
      />
      <p>入力された内容👇</p>
      <div className="output">
        {text}
      </div>
    </div>
  );
}

Answer 1

区別はイベントの種類ではなく、ハンドラの引数の問題です。

---

onClick={()=>handleClickTab(0)}としていますが、こう書けばhandleClickTabには書いての通り0が渡されます。

一方で、onClick={handleClickTab}としてしまうと、handleClickTabの引数にはイベントオブジェクトが渡されます。数値が来るつもりで処理してしまえば正常動作はしません。

---

逆に、handleChangeは来たイベントオブジェクトのeから必要な値を取り出す関数です。onChange={e => handleChange(e)}でも動くことは動きますが、わざわざその場で関数を作るのが煩雑なだけです。

Comments

[natsumi_1224]

ありがとうございます☺️!!
何が渡されるかを意識すれば良かったのですね!!

個人的にonChange={e => handleChange(e)}が分かりやすかったです!!