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

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

React-ൽ ഫോമുകൾ നിർമ്മിക്കുമ്പോൾ സ്റ്റേറ്റ് മാനേജ്‌മെന്റ് (state management) വളരെ ശ്രദ്ധയോടെ ചെയ്യേണ്ടതുണ്ട്. ഒരു രജിസ്ട്രേഷൻ ഫോം എങ്ങനെ പൂജ്യത്തിൽ നിന്ന് നിർമ്മിക്കാം എന്ന് ഈ ഗൈഡ് കാണിച്ചുതരുന്നു.

നിങ്ങൾ പ്രധാനമായും നാല് കാര്യങ്ങൾ പഠിക്കും:

• State Management എല്ലാ ഫോം ഫീൽഡുകളും ഒരൊറ്റ സ്റ്റേറ്റ് ഒബ്‌ജക്റ്റിൽ (state object) സൂക്ഷിക്കുക. പേര്, പ്രായം, ഇമെയിൽ, പാസ്‌വേഡ് എന്നിവ ട്രാക്ക് ചെയ്യാൻ useState ഹുക്ക് ഉപയോഗിക്കുക.

• Handling Inputs എല്ലാ ഇൻപുട്ട് മാറ്റങ്ങളും നിയന്ത്രിക്കാൻ ഒരു ഫംഗ്ഷൻ ഉപയോഗിക്കുക. പഴയ ഡാറ്റ സ്പ്രെഡ് (spread) ചെയ്തുകൊണ്ട് പുതിയ ഇൻപുട്ട് പേരിന് അനുസൃതമായ മൂല്യം ചേർത്ത് സ്റ്റേറ്റ് അപ്‌ഡേറ്റ് ചെയ്യാം.

• Form Validation ഫോം സബ്മിറ്റ് ചെയ്യുന്നതിന് മുമ്പ് എല്ലാ ഫീൽഡുകളിലും ഡാറ്റ ഉണ്ടെന്ന് ഉറപ്പുവരുത്തുക. ഏതെങ്കിലും ഫീൽഡ് കാലിയാണെങ്കിൽ ഒരു അലേർട്ട് (alert) കാണിക്കുക.

• 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