มาใส่ TypeScript ให้กับ React Event กันดีกว่า

React ก็เป็น JavaScript library ที่นิยมใช้สำหรับการสร้าง user interfaces และเมื่อนำมาใช้ร่วมกับ TypeScript ก็จะให้เครื่องมือที่มีประสิทธิภาพสำหรับการสร้างแอปพลิเคชันที่มีประสิทธิภาพและปลอดภัยจากปัญหา type ได้ ในบทความนี้เราจะมาดูกันว่ามี event handler ที่ใช้บ่อยๆ ใน React อะไรบ้าง และเราจะมาดูการใช้งานร่วมกับ TypeScript กัน

onClick

onClick ก็เป็น event ที่เรา click อะไรสักอย่าง อาจจะเป็นปุ่ม ลิงค์ หรืออะไรก็ตามที่เราต้องการให้มันทำงาน

ตัวอย่างการใช้งาน onClick ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleClick = () => {
    alert("Button clicked!");
  };
 
  return <button onClick={handleClick}>Click me</button>;
};

onChange

onChange ก็เป็น event มักจะเจอบ่อยตอนเรานำมาใช้กับพวก Input form ที่มีการเปลี่ยนแปลง value เวลาที่เรากรอกข้อมูล

ตัวอย่างการใช้งาน onChange ร่วมกับ TypeScript

import React, { useState } from "react";
 
const MyComponent: React.FC = () => {
  const [inputValue, setInputValue] = useState("");
 
  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };
 
  return <input type="text" value={inputValue} onChange={handleInputChange} />;
};

onSubmit

onSubmit ก็เป็น event ที่เราจะใช้สำหรับการ submit form

ตัวอย่างการใช้งาน onSubmit ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    alert("Form submitted!");
  };
 
  return (
    <form onSubmit={handleSubmit}>
      {/* Form fields */}
      <button type="submit">Submit</button>
    </form>
  );
};

onMouseOver and onMouseOut

onMouseOver และ onMouseOut ก็เป็น event ที่เราจะใช้สำหรับจับเหตุการณ์เมื่อเราเอาเมาส์มาชี้และออกจากการชี้ที่อะไรบางอย่าง

ตัวอย่างการใช้งาน onMouseOver และ onMouseOut ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleMouseOver = () => {
    console.log("Mouse over");
  };
 
  const handleMouseOut = () => {
    console.log("Mouse out");
  };
 
  return (
    <div onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
      Hover over me
    </div>
  );
};

onFocus and onBlur

The onFocus event handler triggers when an element gains focus, and onBlur triggers when it loses focus:

onFocus ก็เป็น event เมื่อเราเอาเมาส์มาคลิกเพื่อโฟกัสที่อะไรบางอย่าง และ onBlur ก็เป็น event เมื่อเราเอาเมาส์ออกจากสิ่งที่เราโฟกัส

ตัวอย่างการใช้งาน onFocus และ onBlur ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleFocus = () => {
    console.log("Input focused");
  };
 
  const handleBlur = () => {
    console.log("Input blurred");
  };
 
  return (
    <input onFocus={handleFocus} onBlur={handleBlur} placeholder="Focus me" />
  );
};

onKeyDown, onKeyUp, and onKeyPress

onKeyDown จะเกิดขึ้นเมื่อมีการกดปุ่มบนคีย์บอร์ด
onKeyUp จะเกิดขึ้นเมื่อปล่อยปุ่มบนคีย์บอร์ด
onKeyPress จะเกิดขึ้นเมื่อมีการกดปุ่มบนคีย์บอร์ดและปล่อยปุ่มบนคีย์บอร์ด โดยเราสามารถรู้ได้ว่าปุ่มที่เรากดคือปุ่มอะไร และนำไปใช้งานต่อได้ โดยการใช้ event.key

ตัวอย่างการใช้งาน onKeyDown, onKeyUp, และ onKeyPress ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log("Key down:", event.key);
  };
 
  const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log("Key up:", event.key);
  };
 
  const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
    console.log("Key pressed:", event.key);
  };
 
  return (
    <input
      onKeyDown={handleKeyDown}
      onKeyUp={handleKeyUp}
      onKeyPress={handleKeyPress}
      placeholder="Press a key"
    />
  );
};

onScroll

onScroll ก็เป็น event ที่เราจะใช้สำหรับจับเหตุการณ์เมื่อเราเลื่อนหน้าจอ

ตัวอย่างการใช้งาน onScroll ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleScroll = () => {
    console.log("Scrolled");
  };
 
  return <div onScroll={handleScroll}>Scroll me</div>;
};

onTouchStart and onTouchEnd

onTouchStart และ onTouchEnd ก็เป็น event ที่เราจะใช้สำหรับจับเหตุการณ์เมื่อเราเอานิ้วมือไปแตะที่อะไรบางอย่าง และออกจากการแตะที่อะไรบางอย่าง ส่วนมากจะใช้กับอุปกรณ์ที่มีหน้าจอสัมผัสเช่นมือถือ แท็บเล็ต หรืออื่นๆ

ตัวอย่างการใช้งาน onTouchStart และ onTouchEnd ร่วมกับ TypeScript

import React from "react";
 
const MyComponent: React.FC = () => {
  const handleTouchStart = () => {
    console.log("Touch started");
  };
 
  const handleTouchEnd = () => {
    console.log("Touch ended");
  };
 
  return (
    <div onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd}>
      Touch me
    </div>
  );
};

นี่ก็เป็น event handler ที่ผมคิดว่าน่าจะได้ใช้บ่อยๆ ใน React และ TypeScript. จริงๆ ผมก็เขียนบทความนี้เพื่อกันลืมเองนี่แหละ แต่ไหนก็จดไว้แล้ว ก็เลยคิดว่านำมาแชร์ให้คนอื่นด้วยดีกว่า ก็หวังว่าบทความนี้จะเป็นประโยชน์กับผู้อ่านทุกคนนะครับ และหากมีข้อผิดพลาดหรือข้อเสนอแนะสามารถแสดงความคิดเห็นได้ใต้บทความนี้เลยครับ