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

React-இல் படிவங்களை (forms) உருவாக்குவதற்கு கவனமான state management தேவைப்படுகிறது. ஒரு பதிவுப் படிவத்தை (registration form) ஆரம்பத்திலிருந்து எவ்வாறு உருவாக்குவது என்பதை இந்த வழிகாட்டி உங்களுக்குக் காட்டுகிறது.

நீங்கள் நான்கு முக்கிய கருத்துக்களைக் கற்றுக்கொள்வீர்கள்:

• State Management அனைத்து படிவத் தரவுகளையும் (form fields) ஒரே state object-இல் சேமிக்கவும். பெயர், வயது, மின்னஞ்சல் மற்றும் கடவுச்சொல் ஆகியவற்றைக் கண்காணிக்க useState hook-ஐப் பயன்படுத்தவும்.

• Handling Inputs அனைத்து உள்ளீட்டு மாற்றங்களையும் (input changes) நிர்வகிக்க ஒரு செயல்பாட்டைப் (function) பயன்படுத்தவும். பழைய தரவுகளை spread செய்வதன் மூலமும், input name-ன் அடிப்படையில் புதிய மதிப்பைச் சேர்ப்பதன் மூலமும் நீங்கள் state-ஐப் புதுப்பிக்கலாம்.

• 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