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

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

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

1 React・TypeScriptで入力フォーム(input)のイベント型定義(Event型)をする
- 1.1 React・TypeScriptの入力フォーム(input)のイベント型定義(Event型)一覧
- 1.2 React・TypeScriptの入力フォーム(input)のイベント型定義(Event型)のSample
2 Twitterやってます！Follow Me！
3 React関連の書籍
4 プログラミング学習・エンジニア転職関連の情報
5 参考・引用
6 最近の投稿

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;