เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส
ใช้รีฟเพื่อเข้าถึงโหนด DOM กำหนดโฟกัสให้อินพุตหลังการเรนเดอร์ และวัดขนาดองค์ประกอบด้วยวิธีที่ง่ายและเหมาะสำหรับผู้เริ่มต้น
เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส เป็นบทเรียน React Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
เหตุใดจึงเข้าถึง DOM
เป้าหมาย: ใช้ useRef เพื่อเข้าถึงโหนด DOM ได้อย่างปลอดภัยหลังการเรนเดอร์
- ผูกการอ้างอิงเข้ากับองค์ประกอบ JSX
- อ่าน ref.current ภายในเอฟเฟกต์
- โฟกัสหรือวัดขนาดองค์ประกอบ
การดำเนินการหลังการเรนเดอร์
DOM พร้อมใช้งาน หลัง การเรนเดอร์ ใช้ useEffect สำหรับการดำเนินการ เช่น การโฟกัส() หรือการวัดขนาด ให้การเรนเดอร์ บริสุทธิ์
สาธิต: โฟกัสช่องป้อนข้อมูลอัตโนมัติ
ผูกการอ้างอิงเข้ากับช่องป้อนข้อมูล แล้วเรียกใช้ การโฟกัส() ภายใน useEffect([]) เพื่อให้ทำงานหลังการวาดครั้งแรก
<div id="root"></div>
วัดขนาดหลังการเรนเดอร์
หากต้องการวัดขนาดองค์ประกอบ ให้อ่าน getBoundingClientRect() จาก ref.current ในเอฟเฟกต์ และอัปเดตเมื่อปรับขนาดหน้าต่างเพื่อให้ค่าทันสมัยอยู่เสมอ
สาธิต: วัดความกว้าง
เราเก็บการอ้างอิงของกล่องและอ่าน ความกว้าง ของกล่องเมื่อติดตั้งและเมื่อหน้าต่างถูกปรับขนาด การล้างข้อมูลจะลบตัวรับฟังเหตุการณ์ออก
<div id="root"></div>
เคล็ดลับและข้อควรระวัง
เคล็ดลับ:
- ผูกการอ้างอิงเข้ากับโหนด DOM จริง เช่น ช่องป้อนข้อมูลหรือองค์ประกอบแบบกล่อง
- อ่านค่าหรือดำเนินการใน useEffect (หลังการวาด)
- ล้างข้อมูลตัวรับฟังเหตุการณ์ที่เพิ่มไว้เสมอ
ตรวจสอบการโฟกัสหลังการเรนเดอร์
สรุป
สรุป: ผูกการอ้างอิงเข้ากับโหนด DOM แล้วใช้หลังการเรนเดอร์เพื่อเรียกใช้การโฟกัส() หรืออ่านขนาดผ่าน getBoundingClientRect() ล้างข้อมูลตัวรับฟังเหตุการณ์ที่เพิ่มไว้ทุกตัว
คำถามที่พบบ่อย
บทเรียน “เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส”
ใช้รีฟเพื่อเข้าถึงโหนด DOM กำหนดโฟกัสให้อินพุตหลังการเรนเดอร์ และวัดขนาดองค์ประกอบด้วยวิธีที่ง่ายและเหมาะสำหรับผู้เริ่มต้น คุณปฏิบัติ React Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน React Academy นี้ได้ไหม
ได้ บทเรียน React Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เก็บค่าต่อเนื่องโดยไม่เรนเดอร์ใหม่
- เข้าถึงโหนด DOM การวัดขนาด และการกำหนดโฟกัส
- รีฟที่เปลี่ยนแปลงได้สำหรับตัวจับเวลาและรหัส