كيفية الحصول على value من inputs في React؟

يمكن قراءة قيم حقول inputs بطريقة ديناميكية باستعمال handler وحيد يكون بالشكل التالي:

this.setState({ [evt.target.name]: evt.target.value })

كما نلاحظ هذه من نوع ES6 Computed property names أي سوف يتم تعويض اسم الخاصية المتغيرة مع قيمتها مهما اختلفت.

نعم هناك طريقة ستقوم فيها بكتابة handler واحد لجميع عناصر ال input وهي كالتالي

handleChange (e) {
    this.setState({ [e.target.name]: e.target.value });
}

تقوم هذه الطريقة بتغيير ال state لل input الذي قام بإستدعاء الدالة لذلك إذا تم تغيير قيمة ال password مثلاً 

ستم تنفيذ الدالة السابقة كالتالي

handleChange (evt) {
    this.setState({ password: "باسورد" });
}

ولكن بالنسبة لل state ستحتاج لإضافة جميع عناصر ال input

تسمى المدخلات التي تسجل قيمتها في ال state  وكذلك يكون لها onChange handler ب "Controlled Input" ولذا لابد من استخدام ال state وال handler ولكن يمكننا توفير كتابة handler لكل input وكتابة handler واحد فقط للجميع كالتالي

handleChange(e){
    const { name, value } = e.target;
    this.setState({
        [name]: value
    })
}

 بحيث يكون ال name هو الاسم المسجل داخل ال state لهذا ال input.

وأيضا لتسهيل كتابة ال state عليك طالما أنت تستخدم ال hooks ف الأفضل في هذه الحاله أن تستخدم useReducer كالتالي

 const [input, setInput] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
    {
      name1: "", // هنا أسماء المدخلات 
      name2: "",
      name3: ""
    }
  );

 const handleChange = e => {
    const { name, value } = e.target;
    setInput({ [name]: value });
  };

هناك أيضا مكتبات خارجيه تساعدك وتسهل عليك الأمر أكثر وأكثر يمكنك الإطلاع عليها أرشح لك منها 

• react hook form
• Formik

يمكنك تسهيل الأمر بانشاء  custom hook تناسب حاجياتك البرمجية فمثلا يمكنك القيام بأمر مماثل 

function useForm() {
  const [form, setForm] = useState();

  const handleChange = (e) => {
    setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };

  const handleSubmit = (actions) => {
    action();
  };

  return [form, setForm, handleChange, handleSubmit];
}

هذه ال Hook ستسهل ليس فقط النموذج الحالي الذي لديك الأن وأيضا يمكنك استخدامها في أي نموذج أخر مستقبلي على نفس المشروع واستخدامها هو كأي hook أخرى

import useForm from './useForm'

import React from 'react'

export default function user() {
const [form, setForm, handleChange, handleSubmit] = useForm()
    return (
      .....
    )
}