การใช้ UseImperativeHandle ฉบับมือใหม่พร้อมตัวอย่างง่ายๆ

ขอบอกว่าผมย้ายสายมาจาก Php(Laravel) มาจับ React พึ่งเริ่มเรียนรู้เป็นมือใหม่ป้ายแดงของแทร่

*เนื้อหานี้เป็นการสรุปตามความเข้าใจของผมเอง ถ้าหากมีการผิดพลาด ผมต้องขออภัยอย่างสูงครับ

ตัว UseImperativeHandle สรุปแบบสั้นๆ คือ hook ตัวหนึ่งที่ไว้ใช้ส่ง function หรือ อะไรก็แล้วแต่ ฯลฯ จาก Child Component(ลูก) ไป Parent Component (แม่)ได้ ซึ่งปกติ เวลาเราส่งต้องส่ง Props จาก Component แม่ไปหาลูกเท่านั้น โดยใชวิธีการ Callback Function

ตัวอย่างการใช้งาน

**ผมสร้างสถานการณ์ตัวอย่างขึ้นมาเป็นการเพิ่มและลบ input ชื่อ-นามสกุล ประวัติส่วนตัวแบบง่ายๆ

โดยผมสร้าง ขึ้นมา 2 ไฟล์มี Parent , Child Component ตามรูปภาพด้านล่าง

Parent Component

Child Component

ซึ่งจะมีหน้าตาแบบนี้ครับ

ภาพการแสดงผล

โดยจะเห็นได้ว่า ในไฟล์ Parent Component(รูปภาพที่ 1) เรามีการ import Component ที่ชื่อว่า RenderData เข้ามาเป็น Child Component(รูปภาพที่ 2) มีฟังก์ชั่นที่ชื่อ onAddItem และ onDeleteItemAll อยู่ใน Component นี้ด้วย
โดยฟังก์ชั่นที่ชื่อ onAddItem จะอยู่ที่ button เพิ่มรายชื่อ ทำหน้าที่เป็นการ Update State ที่ชื่อว่า DataName Push Array เพิ่มเข้าไปทีละ 1 ตามวิดีโอด้านล่าง

ตัวอย่างการทำงานของฟังก์ชั่น onAddItem

และ ฟังก์ชั่น onDeleteItemAll จะทำหน้าที่ set State ให้เป็น Array เปล่าเปรียบเสมือนเป็นการลบข้อมูลทั้งหมดแล้ว

ทีนี้ถ้าเราอยากเอา ฟังก์ชั่น onDeleteItemAll ไปใช้ใน Parent Component(รูปภาพที่ 1) ละจะส่งไปยังไง ?

คำตอบก็ใช้ UseImperativeHandle ไงแหละ

วิธีใช้เราจำเป็นต้อง import forwardRef และ useImperativeHandle ก่อน

เพิ่ม forwardRef และ useImperativeHandle ใน Child Component(รูปภาพที่ 2)

เราต้องรับ ref เข้ามาใน Component ด้วยจากนั้น เราเรียกใช้ useImperativeHandle โดยต้องรับ ref และ callback function จากนั้นให้เขียน function ที่ต้องการจะทำงานให้กับตัว Parent Component(รูปภาพที่ 1) ในที่นี้เราเขียนฟังก์ชั่น onDeleteItemAllHandle เพื่อเรียกใช้ onDeleteItemAll ใน Child Component(รูปภาพที่ 2) ตามรูปด้านล่าง

ภาพแสดงการเรียกใช้ useImperativeHandle ใน Child Component

ทีนี้ให้เรามา import useRef ที่ Parent Component(รูปภาพที่ 1) และประกาศการเรียกใช้ในที่มีชื่อว่า ChildRef และเพิ่มปุ่มลบข้อมูลทั้งหมด และเรียกใช้ฟังก์ชั่น onDeleteItemAllHandle ผ่านตัว ref ตามรูปด้านล่าง

ภาพแสดงการเรียกใช้ onDeleteItemAllHandle ใน Parent Component

ซึ่งผลลัพธ์จะได้ตามวิดีโอด้านล่าง

ภาพแสดงการเรียกใช้ฟังก์ชั่น onDeleteItemAllHandle

สุดท้ายนี้หวังว่าบทความนี้จะมีประโยชน์ กับทุกคนที่เข้ามาอ่าน ไม่มากก็น้อยนะครับ หากผิดพลาดประการใด ขออภัยด้วยครับ

ขอบคุณครับ