𝗥𝗲𝗮𝗰𝘁 𝗙𝗼𝗿𝗺 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝗕𝘂𝗶𝗹𝗱 𝗚𝘂𝗶𝗱𝗲

React Form Component બનાવવાની માર્ગદર્શિકા

React માં ફોર્મ બનાવવા માટે સ્ટેટ મેનેજમેન્ટ (state management) પર ધ્યાન આપવું જરૂરી છે. આ માર્ગદર્શિકા તમને શૂન્યથી રજીસ્ટ્રેશન ફોર્મ કેવી રીતે બનાવવું તે બતાવશે.

તમે ચાર મુખ્ય ખ્યાલો શીખશો:

• State Management તમામ ફોર્મ ફિલ્ડ્સને એક સ્ટેટ ઓબ્જેક્ટમાં સ્ટોર કરો. નામ, ઉંમર, ઈમેલ અને પાસવર્ડને ટ્રેક કરવા માટે useState હૂકનો ઉપયોગ કરો.

• Handling Inputs તમામ ઇનપુટ ફેરફારોને મેનેજ કરવા માટે એક જ ફંક્શનનો ઉપયોગ કરો. તમે જૂના ડેટાને સ્પ્રેડ (spread) કરીને અને ઇનપુટના નામ પર આધારિત નવું મૂલ્ય ઉમેરીને સ્ટેટ અપડેટ કરો છો.

• Form Validation સબમિટ કરતા પહેલા તપાસો કે તમામ ફિલ્ડ્સમાં ડેટા છે કે નહીં. જો કોઈ ફિલ્ડ ખાલી હોય તો એલર્ટ બતાવો.

• Keyboard Support Enter કી માટે લિસનર (listener) ઉમેરો. આનાથી વપરાશકર્તાઓ બટન પર ક્લિક કર્યા વિના ફોર્મ સબમિટ કરી શકે છે.

કોડ ઉદાહરણ:

import { useState } from "react";

function FormValidation() {
  const [userdata, setUserdata] = useState({
    name: "",
    age: "",
    mobile: "",
    email: "",
    dob: "",
    password: ""
  });

  function getdata(e) {
    const { name, value } = e.target;
    setUserdata({
      ...userdata,
      [name]: value
    });
  }

  function validate() {
    const { name, age, mobile, email, dob, password } = userdata;
    if (name && age && mobile && email && dob && password) {
      alert("Submitted successfully");
    } else {
      alert("Please fill all fields");
    }
  }

  function handlekey(e) {
    if (e.key === "Enter") {
      validate();
    }
  }

  return (
    <form onKeyDown={handlekey}>
      <input name="name" onChange={getdata} value={userdata.name} />
      <input name="age" onChange={getdata} value={userdata.age} />
      <input name="mobile" onChange={getdata} value={userdata.mobile} />
      <input name="email" onChange={getdata} value={userdata.email} />
      <input name="dob" onChange={getdata} value={userdata.dob} />
      <input name="password" type="password" onChange={getdata} value={userdata.password} />
      <button type="button" onClick={validate}>Submit</button>
    </form>
  );
}

સ્ત્રોત: https://dev.to/jayashree_a84b6eff7bc414e/react-form-component-blog-explanation-with-code-3enh