في React، هناك طريقتان رئيسيتان للتعامل مع مدخلات النموذج:

• المكونات التي يتم التحكم فيها
• المكونات غير المنضبطة

توفر المكونات الخاضعة للتحكم المزيد من التحكم والتحقق من الصحة، في حين أن المكونات غير الخاضعة للتحكم أبسط ومفيدة للأشكال الأساسية للوصول إلى القيمة المتقطعة.

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

هذه هي مدخلات النموذج التي يتم التحكم في قيمها بواسطة React State. يتم تحديث متغيرات الحالة كلما تغيرت قيمة الإدخال، ويتم تعيين قيمة الإدخال بشكل صريح من خلال خاصية القيمة.

يتم استخدام معالج الأحداث onChange لتحديث الحالة.

import React, { useState } from "react";
function ControlledComponent() {
     const [name, setName] = useState("")

     const handleChange = (e) => {
          setName(e.target.value);
     }

     return(
          
     );
}

في المثال أعلاه، يتحكم متغير الحالة name في قيمة حقل الإدخال. تقوم وظيفة handleChange بتحديث حالة الاسم كلما تغيرت قيمة الإدخال وتم تعيين قيمة الإدخال على القيمة الحالية لمتغير حالة الاسم من خلال خاصية القيمة.

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

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

import React, { useRef } from "react";
function UncontrolledComponent() {
     const inputRef = useRef(null);

     const handleSubmit = (e) => {
          e.preventDefault();
          console.log(inputRef.current.value);
     };

     return(
          

في هذا المثال أعلاه، يتم استخدام inputRef لإنشاء ref للحقل input. تصل وظيفة handleSubmit إلى القيمة الحالية للإدخال باستخدام inputRef.current.value. يمكن تنفيذ منطق إرسال النموذج للاستفادة من قيمة الإدخال كما هو مطلوب.