React Academy · บทเรียน

ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี)

แสดงข้อผิดพลาดเฉพาะเมื่อผู้ใช้โต้ตอบกับช่องแล้ว (touched) หรือแก้ไขค่าแล้ว (dirty) ปรับปรุงประสบการณ์ผู้ใช้ด้วยการแจ้งเตือนที่ชัดเจนและทันท่วงที

บทเรียน 3 จาก 38 ขั้นตอน

ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี) เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงใช้สถานะผ่านการโต้ตอบและมีการเปลี่ยนแปลง

เป้าหมาย: แสดงข้อความตรวจสอบข้อมูลในเวลาที่เหมาะสม โดยใช้เครื่องหมายผ่านการโต้ตอบ ซึ่งหมายถึงมีการเข้าใช้งาน และมีการเปลี่ยนแปลง ซึ่งหมายถึงมีการแก้ไข

คำจำกัดความ

ผ่านการโต้ตอบ: ผู้ใช้โฟกัสที่ฟิลด์แล้วเลื่อนโฟกัสออก มีการเปลี่ยนแปลง: ค่าของฟิลด์แตกต่างจากค่าเริ่มต้น ใช้สถานะเหล่านี้เพื่อกำหนดเวลาแสดงข้อผิดพลาด

ตัวอย่าง: ประสบการณ์ผู้ใช้เมื่อผ่านการโต้ตอบและมีการเปลี่ยนแปลง

เราติดตามสถานะผ่านการโต้ตอบเมื่อเลื่อนโฟกัสออก และสถานะมีการเปลี่ยนแปลงเมื่อค่าถูกแก้ไข ข้อผิดพลาดจะแสดงหลังจากมีการโต้ตอบหรือเมื่อส่งแบบฟอร์ม


<div id="root"></div>

กำหนดเวลาแสดงข้อความ

แสดงข้อผิดพลาดหลังจากฟิลด์ผ่านการโต้ตอบ หรือหลังจากส่งแบบฟอร์ม ใช้สถานะมีการเปลี่ยนแปลงเพื่อเน้นฟิลด์ที่ถูกแก้ไข

คำแนะนำที่ดียิ่งขึ้น

เคล็ดลับ:

  • เขียนข้อความให้สั้นและเจาะจง
  • อย่าขัดขวางการพิมพ์ ให้ตรวจสอบอย่างนุ่มนวล
  • ใช้สีและตำแหน่งใกล้เคียงเพื่อให้เข้าใจได้ชัดเจน

ข้อควรระวัง

ควรหลีกเลี่ยง:

  • แสดงข้อผิดพลาดทั้งหมดตั้งแต่การเรนเดอร์ครั้งแรก
  • ซ่อนข้อผิดพลาดหลังจากส่งแบบฟอร์ม
  • ใช้อินพุตแบบไม่ควบคุมปะปนกับสถานะการตรวจสอบข้อมูล

ตรวจสอบคำจำกัดความของสถานะผ่านการโต้ตอบ

ในสถานะแบบฟอร์ม โดยทั่วไปสถานะผ่านการโต้ตอบบ่งบอกอะไรสำหรับฟิลด์หนึ่ง

สรุปทบทวน

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

เริ่มต้นได้ฟรี

เรียนรู้ React ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
88
บทเรียน
324

คำถามที่พบบ่อย

บทเรียน “ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี)” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี)” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี)”

แสดงข้อผิดพลาดเฉพาะเมื่อผู้ใช้โต้ตอบกับช่องแล้ว (touched) หรือแก้ไขค่าแล้ว (dirty) ปรับปรุงประสบการณ์ผู้ใช้ด้วยการแจ้งเตือนที่ชัดเจนและทันท่วงที คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน

บทเรียน “ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี)” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม

ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. ฟอร์มแบบควบคุมที่มีข้อมูลเข้าหลายรายการ
  2. รูปแบบการตรวจสอบพื้นฐานและการจัดการการส่งฟอร์ม
  3. ข้อความข้อผิดพลาดและสถานะ touched/dirty (แบบไม่ใช้ไลบรารี)
← กลับไปที่ React Academy