React Form Component నిర్మాణ గైడ్

Reactలో ఫారమ్‌లను నిర్మించడానికి జాగ్రత్తగా state management అవసరం. ఈ గైడ్ మీరు మొదటి నుండి ఒక రిజిస్ట్రేషన్ ఫారమ్‌ను ఎలా నిర్మించాలో చూపిస్తుంది.

మీరు నాలుగు ప్రధాన అంశాలను నేర్చుకుంటారు:

• State Management అన్ని ఫారమ్ ఫీల్డ్‌లను ఒకే state ఆబ్జెక్ట్‌లో నిల్వ చేయండి. పేరు, వయస్సు, ఈమెయిల్ మరియు పాస్‌వర్డ్‌లను ట్రాక్ చేయడానికి useState హుక్‌ను ఉపయోగించండి.

• Handling Inputs అన్ని ఇన్‌పుట్ మార్పులను నిర్వహించడానికి ఒకే ఫంక్షన్‌ను ఉపయోగించండి. పాత డేటాను స్ప్రెడ్ (spread) చేయడం ద్వారా మరియు ఇన్‌పుట్ పేరు ఆధారంగా కొత్త విలువను జోడించడం ద్వారా మీరు 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