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

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

React ನಲ್ಲಿ ಫಾರ್ಮ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಎಚ್ಚರಿಕೆಯ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ (state management) ಅಗತ್ಯವಿದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ನೋಂದಣಿ ಫಾರ್ಮ್ ಅನ್ನು ಮೊದಲಿನಿಂದ ಹೇಗೆ ನಿರ್ಮಿಸಬೇಕೆಂದು ನಿಮಗೆ ತೋರಿಸುತ್ತದೆ.

ನೀವು ನಾಲ್ಕು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಕಲಿಯುವಿರಿ:

• State Management (ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್) ಎಲ್ಲಾ ಫಾರ್ಮ್ ಫೀಲ್ಡ್‌ಗಳನ್ನು ಒಂದೇ ಸ್ಟೇಟ್ ಆಬ್ಜೆಕ್ಟ್‌ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ. ಹೆಸರು, ವಯಸ್ಸು, ಇಮೇಲ್ ಮತ್ತು ಪಾಸ್‌ವರ್ಡ್ ಅನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು useState hook ಅನ್ನು ಬಳಸಿ.

• 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