ส่วนประกอบที่ควบคุมและส่วนประกอบที่ไม่มีการควบคุมใน ReactJS คืออะไร? พวกเขาแตกต่างจากกันอย่างไร?
คำตอบ:
สิ่งนี้เกี่ยวข้องกับส่วนประกอบ DOM ที่มีสถานะ (องค์ประกอบฟอร์ม) และเอกสาร React อธิบายความแตกต่าง:
props onChangeองค์ประกอบหลัก "ควบคุม" โดยจัดการการเรียกกลับและจัดการสถานะของตัวเองและส่งผ่านค่าใหม่เป็นอุปกรณ์ประกอบฉากไปยังส่วนประกอบที่ควบคุม คุณสามารถเรียกสิ่งนี้ว่า "องค์ประกอบใบ้" ก็ได้refเพื่อหามูลค่าปัจจุบันเมื่อคุณต้องการมัน ซึ่งคล้ายกับ HTML แบบเดิมเล็กน้อยส่วนประกอบรูปแบบการตอบสนองดั้งเดิมส่วนใหญ่รองรับการใช้งานทั้งแบบควบคุมและไม่มีการควบคุม:
// Controlled:
<input type="text" value={value} onChange={handleChange} />
// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>
stateมากกว่าไม่ใช่propsหรือ
propsสำหรับองค์ประกอบการควบคุมค่าจะถูกส่งผ่าน ส่วนประกอบที่ไม่มีการควบคุมจะใช้stateเพื่อควบคุมค่าภายใน นี่คือความแตกต่างที่สำคัญ
controlled components( <input type="text" value="value" onChange={handleChangeCallbackFn} />) เทียบกับ HTML แบบดั้งเดิมโดยที่องค์ประกอบอินพุตจัดการกับค่าของตนเองและสามารถอ่านได้ผ่านทางที่refsเรียกว่าuncontrolled components( <value type="text" />) ส่วนประกอบที่ควบคุมกำลังจัดการสถานะของตนเองผ่านsetStateหรือรับจากส่วนประกอบหลักเป็นอุปกรณ์ประกอบฉาก
defaultValueผ่านอุปกรณ์ประกอบฉากได้อย่างไร แต่จะแจ้งให้คอนโทรลเลอร์ทราบonBlurอย่างไร
<Button onClick={() => console.log("clicked")}>Click</Button>.ส่วนประกอบที่ควบคุมเป็นส่วนประกอบที่ได้รับค่าที่เปลี่ยนแปลงจากฟังก์ชันการเรียกกลับและส่วนประกอบที่ไม่มีการควบคุมเป็นส่วนประกอบที่มีจาก DOM ตัวอย่างเช่นเมื่อค่าอินพุตมีการเปลี่ยนแปลงเราสามารถใช้ฟังก์ชัน onChange ใน Controlled Component และเราสามารถรับค่าโดยใช้ DOM เช่น ref