e.targetの中身

Reactでよく出てくるe.target.valueで入力値などを取得していたが、e.targetには何が含まれているか理解していなかったので調べた記録。

.targetとは

JavaScriptのプロパティ。

targetはEventインターフェイスの読み取り専用プロパティで、イベントが配信されたオブジェクトへの参照です。
引用:mdm web docs

JSでのイベント発火時にイベント内容を参照できる。

例と.targetの内容

// 学習中に出てきたサンプルコードを一部改変、関係ない部分は省略しています。

const onChangeText = (e) => setText(e.target.value);

return (
  <>
    <div className="input-area">
      <input placeholder="テキストを入力" value={text} onChange={onChangeText} />
      <button>追加</button>
  </>
);

入力フォームにテキストが入力されるとonChangeText関数が呼ばれ、入力内容を更新関数setTextに渡してtextを更新する仕組み。
なので、このe.target.valueは入力内容を取得している。
e.targetを見てみる。

// 前述のコードにconsole.logを追加

const onChangeText = (e) => {setText(e.target.value), console.log(e.target)};

return (
  <>
    <div className="input-area">
      <input placeholder="テキストを入力" value={text} onChange={onChangeText} />
      <button>追加</button>
  </>
);

入力フォームに"hello"を入力したときのコンソールでの表示結果が以下。

e.targetは要素を、.valueで入力値の"hello"を参照していることがわかる。

まとめ

e.target.valueは入力値を取得できる書き方として使用していたが、.targetが何をしているか理解することができた。

関係ないが、初心者が何かアプリを作成するときに一番役立つのってデバッグスキルだと思う。