หากใครเคยใช้ picker บน react native อาจจะเคยพบปัญหาที่ว่า เราอยากให้มีปุ่มแถมขึ้นมา เช่น กรุณาเลือก แบบนี้
หากเราไม่ใส่ option มาเลย จะเป็นแบบด้านล่าง
จะเห็นว่า picker จะดึงเอา option แรกสุดมาใส่ แต่สิ่งที่เราต้องการคือแบบนี้
ปัญหาก็คือว่า เราไม่ต้องการให้สามารถเลือกปุ่ม “กรุณาเลือก” ได้
ทีนี้เรามาลอง disable ปุ่มดู
จะพบว่าเราไม่สามารถคลิกตรง “กรุณาเลือก” ได้ ต้องไปกดที่ปุ่ม dropdown แทน ทำให้ใช้งานยากโดยไม่จำเป็น
วิธีแก้คือเราสร้าง Boolean พิเศษเข้ามา เช่น
เพิ่ม onFocus กับ onBlur เข้ามา ไอเดียคือ ปุ่มกรุณาเลือกจะใช้งานไม่ได้ถ้ากดเลือก option
พอกดแล้วก็จะเป็นแบบนี้ ถ้าเราเผลอไม่เลือก option onBlur ก็จะมาช่วยแก้ปัญหาไม่ให้ปุ่ม “กรุณาเลือก” กดไม่ได้
นี่เป็นไอเดียนึงที่ช่วยแก้ปัญหาเบื้องต้นได้ แต่หากใครมีไอเดียที่ดีกว่านี้ก็สามารถแชร์ได้เช่นกัน
ผู้เขียน Tanapat Limtemsap
วันที่ 22 เมษายน พ.ศ. 2565