React・TypeScriptで入力フォーム(input)のイベント型定義(Event型)一覧と方法

React_Event_Types

こんにちはフロントエンドエンジニアのまさにょんです!

今回は、React・TypeScriptで入力フォーム(input)のイベント型定義(Event型)方法についてまとめて解説していきます。

React・TypeScriptで入力フォーム(input)のイベント型定義(Event型)をする

React・TypeScriptの入力フォーム(input)のイベント型定義(Event型)一覧

React・TypeScriptの入力フォーム(input)のイベント型定義(Event型)は、次のようなものになります。

type EventTypes = {

  // 1. 一般的な入力フォームのEvent型定義 => text, checkbox, radioなど
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

  // 2. input[type="button"]のEvent型定義
  onClick: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;

  // 3. buttonタグのEvent型定義
  onClickBtn: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

  // 4. divタグのEvent型定義
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;

  // 5. SelectBoxのEvent型定義
  changeSelect: (e: React.ChangeEvent<HTMLSelectElement>) => void;

  // 6. TextAreaのEvent型定義
  inputTextArea: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

  // 7. Keyボード操作のEvent型定義
  onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void;

  // 8. FocusのEvent型定義
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;

  // 9. SubmitのEvent型定義
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
};

React・TypeScriptの入力フォーム(input)のイベント型定義(Event型)のSample

import React, { useState } from 'react';

type EventTypes = {

  // 1. 一般的な入力フォームのEvent型定義 => text, checkbox, radioなど
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;

  // 2. input[type="button"]のEvent型定義
  onClick: (event: React.MouseEvent<HTMLInputElement, MouseEvent>) => void;

  // 3. buttonタグのEvent型定義
  onClickBtn: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;

  // 4. divタグのEvent型定義
  onClickDiv: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;

  // 5. SelectBoxのEvent型定義
  changeSelect: (e: React.ChangeEvent<HTMLSelectElement>) => void;

  // 6. TextAreaのEvent型定義
  inputTextArea: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;

  // 7. Keyボード操作のEvent型定義
  onkeypress: (event: React.KeyboardEvent<HTMLInputElement>) => void;

  // 8. FocusのEvent型定義
  onFocus: (event: React.FocusEvent<HTMLInputElement>) => void;

  // 9. SubmitのEvent型定義
  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
};

const EventSample = () => {

  // 1. 参加者名の入力情報-Data
  const [participant, setParticipant] = useState<string>('');
  const inputParticipant: EventTypes["onChange"] = (event)=>{
    setParticipant(event.target.value);
  };

  // 2. 所属・部署の入力情報-Data
  const [affiliation, setAffiliation] = useState<string>('');
  const inputAffiliation = (event: React.ChangeEvent<HTMLInputElement>)=>{
    setAffiliation(event.target.value);
  };

  // 3. 参加者登録List
  const [list, setList] = useState<{participant:string; affiliation:string }[]>([]);
  const addParticipant = (e: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    setList([...list, {participant, affiliation}]);
  };

  return (
    <section>
      <h2 className="SectionTitle">参加者登録</h2>
      <div className="SectionArea RegisterArea">
        <div>
          <span className="Discription">参加者名: </span>
          <input type="text" placeholder="ロボ玉" onChange={(event) => inputParticipant(event) } />
        </div>
        <div>
          <span className="Discription">部署・所属: </span>
          <input type="text" placeholder="エンジニア" onChange={(event) => inputAffiliation(event) } />
        </div>
        <input type="button" value="追加" onClick={(e) => addParticipant(e) } className="Btn" />
      </div>
    </section>
  )
};

export default EventSample;

Twitterやってます!Follow Me!

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ!!!!!

React関連の書籍

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース(無料)

【IT道場】入校時0円! 就職目的プログラミングスクール

エンジニア転職なら100%「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

参考・引用

  1. React hooksを基礎から理解する (useState編)

最近の投稿