ส่วนประกอบควบคุมปฏิกิริยาคืออะไร

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

สภาพแวดล้อมการทำงานของบทช่วยสอนนี้: ระบบ Windows 10, รีแอคเวอร์ชัน 17.0.1, คอมพิวเตอร์ Dell G3

ส่วนประกอบควบคุมปฏิกิริยาคืออะไร

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

ชาวเน็ตบางคนอธิบายสิ่งนี้: ใน React เมื่อใดก็ตามที่สถานะของแบบฟอร์มเปลี่ยนแปลง ส่วนประกอบประเภทนี้จะถูกเรียกว่าส่วนประกอบที่มีการควบคุมใน React

กระบวนการอัพเดตสำหรับส่วนประกอบที่ได้รับการควบคุม:

1. คุณสามารถตั้งค่าเริ่มต้นของแบบฟอร์มในสถานะเริ่มต้นได้

2. เมื่อใดก็ตามที่ค่าของแบบฟอร์มเปลี่ยนแปลง ให้เรียกตัวจัดการเหตุการณ์ onChange

3. ตัวประมวลผลเหตุการณ์ได้รับสถานะที่เปลี่ยนแปลงผ่านทางวัตถุเหตุการณ์ e และเปลี่ยนสถานะ

4. setState ทริกเกอร์ดูการอัปเดตและดำเนินการอัปเดตค่าส่วนประกอบของแบบฟอร์มให้เสร็จสมบูรณ์

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

const { useState } จาก 'react'; function Controlled () { const [อีเมล, setEmail] = useState(); const handleInput = (e) => setEmail(e.target.value); ค่า={อีเมล} onChange={handleInput} />;}

ขยายความรู้ของคุณ:

องค์ประกอบที่ไม่สามารถควบคุมได้คืออะไร?

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

const { useRef } จาก 'react';function ตัวอย่าง () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}

4 อะไรคือความแตกต่างระหว่างพวกเขา?

ในส่วนประกอบที่ได้รับการควบคุม ข้อมูลแบบฟอร์มจะได้รับการจัดการโดยส่วนประกอบ React ในส่วนประกอบที่ไม่มีการควบคุม ข้อมูลแบบฟอร์มจะได้รับการจัดการโดย DOM เอง

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

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