ما هي المكونات التي تسيطر عليها رد الفعل

في React، يشير المكون المتحكم فيه إلى مكون يقوم بتحديث القيمة الحالية من خلال وظيفة رد الاتصال؛ ويتحكم مكون React الذي يعرض النموذج أيضًا في العمليات التي تحدث في النموذج أثناء إدخال المستخدم، كلما تغيرت حالة النموذج يتم كتابتها في حالة المكون، ويسمى هذا النوع من المكونات مكونًا متحكمًا فيه في React.

بيئة تشغيل هذا البرنامج التعليمي: نظام Windows 10، إصدار التفاعل 17.0.1، كمبيوتر Dell G3.

ما هي المكونات التي تسيطر عليها رد الفعل

يتحكم أيضًا مكون React الذي يعرض النموذج في ما يحدث للنموذج أثناء إدخال المستخدم. تُسمى عناصر إدخال النموذج التي يتم التحكم في قيمها بواسطة React بهذه الطريقة بـ "المكونات الخاضعة للتحكم".

وأوضح بعض مستخدمي الإنترنت هذا: في React، كلما تغيرت حالة النموذج، سيتم كتابتها إلى حالة المكون. ويسمى هذا النوع من المكونات مكونًا متحكمًا فيه في React.

عملية التحديث للمكونات الخاضعة للرقابة:

1. يمكنك تعيين القيمة الافتراضية للنموذج في الحالة الأولية

2. عندما تتغير قيمة النموذج، قم باستدعاء معالج الأحداث onChange.

3. يحصل معالج الحدث على الحالة المتغيرة من خلال كائن الحدث e ويغير الحالة؛

4. يقوم setState بتشغيل تحديث العرض وإكمال تحديث قيم مكونات النموذج.

تقوم المكونات التي يتم التحكم فيها بتحديث القيمة الحالية من خلال وظائف رد الاتصال، مثل OnChange. يتحكم المكون الأصلي في حالته ويديرها من خلال وظائف رد الاتصال ويمرر قيمًا جديدة إليه كخصائص. تسمى المكونات التي يتم التحكم فيها أيضًا "المكونات الغبية".

const { useState } from 'react' function Controlled () { const [email, setEmail] = useState(); const HandleInput = (e) => setEmail(e.target.value); القيمة = {البريد الإلكتروني} onChange = {handleInput} />؛}

قم بتوسيع معرفتك:

ما هي المكونات غير المنضبطة؟

المكونات غير المنضبطة هي مكونات تخزن حالتها داخليًا ويمكنها استخدام المرجع للاستعلام عن DOM للعثور على قيمتها الحالية عند الحاجة. نوع من مثل HTML التقليدي. تدعم معظم مكونات نموذج React الأصلية العناصر الخاضعة للتحكم وغير الخاضعة للتحكم:

const { useRef } from 'react';function example () { const inputRef = useRef(null); return <input type="text" defaultValue="bar" ref={inputRef} />}

4 ما الفرق بينهما؟

في المكونات الخاضعة للتحكم، تتم معالجة بيانات النموذج بواسطة مكونات React. في المكونات غير المنضبطة، تتم معالجة بيانات النموذج بواسطة DOM نفسه.

بالنسبة للمكونات التي يتم التحكم فيها، يجب استخدام حالة المكون. بالنسبة للمكونات غير الخاضعة للتحكم، يعد استخدام الحالة اختياريًا تمامًا، ولكن يجب استخدام المراجع داخلها.

بالنسبة للمكونات الخاضعة للرقابة، يمكننا التحقق من صحة الإدخال ولكن ليس للمكونات غير الخاضعة للرقابة.