Vivasoft-logo

7.5 āĻĢāĻ°ā§āĻŽ āĻ•ā§āϰāĻŋā§Ÿā§‡āϟ āĻ•āϰ⧇ āϏāĻžāĻŦāĻŽāĻŋāϟ

āĻĢāĻ°ā§āĻŽ āĻšā§āϝāĻžāĻ¨ā§āĻĄā§‡āϞāĻŋāĻ‚ āϏāĻĢāϟāĻ“ā§Ÿā§āϝāĻžāϰ āĻĄā§‡āϭ⧇āϞāĻĒāĻŽā§‡āĻ¨ā§āĻŸā§‡āϰ āĻāĻ•āϟāĻŋ āĻ•āĻŽāύ āĻ•āĻžāϜāĨ¤ āφāĻŽāϰāĻž āĻāĻ–āύ āĻāĻ•āϟāĻŋ āωāĻĻāĻžāĻšāϰāύ āĻĻ⧇āĻ–āĻŦ,

				
					import React from 'react'

interface FormProps {
  onSubmit: (data: FormData) => void;
}

interface FormData {
  name: string;
  age: number;
}

function Form({ onSubmit }: FormProps) {
  const [formData, setFormData] = React.useState<FormData>({ name:  '', age: 0 });

  function handleInputChange(event:         React.ChangeEvent<HTMLInputElement>) {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  }

  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    onSubmit(formData);
  }

 return (
   <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name}  onChange={handleInputChange} />
      </label>
      <br />
      <label>
        Age:
        <input type="number" name="age" value={formData.age} onChange={handleInputChange} />
     </label>
     <br />
     <button type="submit">Submit</button>
   </form>
  );
}

export default Form;
				
			

āϰāĻŋā§Ÿā§‡āĻ•ā§āϟ āĻāĻŦāĻ‚ āϟāĻžāχāĻĒāĻ¸ā§āĻ•ā§āϰāĻŋāĻĒā§āϟ āĻāϰ āĻŽāĻžāĻ§ā§āϝāĻŽā§‡ āĻĢāĻ°ā§āĻŽā§‡āϰ āϜāĻ¨ā§āϝ āφāĻŽāϰāĻž āĻāĻ•āϟāĻž āĻ•āĻŽā§āĻĒā§‹āύ⧇āĻ¨ā§āϟ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋāĨ¤ āĻāϟāĻžāϰ āϜāĻ¨ā§āϝ āφāĻŽāϰāĻž āĻĒā§āϰāĻĨāĻŽā§‡ Form.tsx āύāĻžāĻŽā§‡ āĻāĻ• āϟāĻŋ āĻĢāĻžāχāϞ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋāĨ¤ āĻāĻ–āĻžāύ⧇ āφāĻŽāϰāĻž Form āύāĻžāĻŽā§‡ āĻāĻ• āϟāĻž āĻĢāĻžāĻ‚āĻļāύāĻžāϞ āĻ•āĻŽā§āĻĒā§‹āύ⧇āĻ¨ā§āϟ āϤ⧈āϰāĻŋ āĻ•āϰ⧇āĻ›āĻŋāĨ¤

āĻāϰāĻĒāϰ āφāĻŽāϰāĻž āĻĻ⧁āχāϟāĻŋ āχāĻ¨ā§āϟāĻžāϰāĻĢ⧇āϏ āϤ⧈āϰāĻŋ āĻ•āϰ⧇āĻ›āĻŋ FormProps āĻāĻŦāĻ‚ FormData āύāĻžāĻŽā§‡āĨ¤ FormProps āφāĻŽāĻžāĻĻ⧇āϰ āĻ•āĻŽā§āĻĒā§‹āύ⧇āĻ¨ā§āϟ āĻāϰ āχāύāĻĒ⧁āϟ props āĻĄāĻŋāĻĢāĻžāχāύ āĻ•āϰ⧇āĨ¤ āĻāϰ āĻŽāĻ§ā§āϝ⧇ āĻāĻ•āϟāĻŋ property āĻšāϞ onSubmit āϝ⧇āχ āĻĢāĻžāĻ‚āĻļāύāϟāĻŋ FormData āϕ⧇ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ āĻšāĻŋāϏāĻžāĻŦ⧇ āĻ¨ā§‡ā§ŸāĨ¤ FormData āφāĻŽāĻžāĻĻ⧇āϰ āĻĢāĻ°ā§āĻŽā§‡āϰ āĻĄāĻžāϟāĻž āĻ¸ā§āĻŸā§āϰāĻžāĻ•āϚāĻžāϰ āĻĄāĻŋāĻĢāĻžāχāύ āĻ•āϰ⧇āĨ¤ āĻāϰ āĻŽāĻ§ā§āϝ⧇ āφāϛ⧇ name, age āĻĒā§āϰāĻĒāĻžāĻ°ā§āϟāĻŋ āĻāĻŦāĻ‚ āĻāχ āĻĻ⧁āχāϟāĻŋāχ āĻ¸ā§āĻŸā§āϰāĻŋāĻ‚ āĻ­ā§āϝāĻžāϞ⧁ accept āĻ•āϰ⧇āĨ¤

āĻāĻ›āĻžā§œāĻžāĻ“ āφāĻŽāϰāĻž useState āĻŦā§āϝāĻžāĻŦāĻšāĻžāϰ āĻ•āϰ⧇ āĻāĻ•āϟāĻŋ āĻļā§‚āĻ¨ā§āϝ state āϤ⧈āϰāĻŋ āĻ•āϰ⧇āĻ›āĻŋāĨ¤ āφāĻŽāϰāĻž formData āϕ⧇ āĻāĻ•āϟāĻŋ āĻĢāĻžāρāĻ•āĻž āĻ…āĻŦāĻœā§‡āĻ•ā§āϟ āĻšāĻŋāϏ⧇āĻŦ⧇ āĻĄāĻŋāĻĢāĻžāχāύ āĻ•āϰ⧇āĻ›āĻŋ āĻļ⧁āϰ⧁āϤ⧇ āϝāĻžāϤ⧇ āχāωāϜāĻžāϰ āϰāĻž āϤāĻžāĻĻ⧇āϰ name āĻ“ age āχāύāĻĒ⧁āϟ āĻĻāĻŋāϤ⧇ āĻĒāĻžāϰ⧇āĨ¤ āφāĻŽāϰāĻž handleInputChange āĻāĻŦāĻ‚ handleSubmit āύāĻžāĻŽā§‡āϰ āĻĻ⧁āϟāĻŋ āĻĢāĻžāĻ‚āĻļāύ āϤ⧈āϰāĻŋ āĻ•āϰāĻŋ āϝāĻžāϰāĻž āχāύāĻĒ⧁āϟ āĻĢāĻŋāĻ˛ā§āĻĄā§‡āϰ āĻ­ā§āϝāĻžāϞ⧁ āφāĻĒāĻĄā§‡āϟ āĻāĻŦāĻ‚ āĻĢāĻ°ā§āĻŽ āϏāĻžāĻŦāĻŽāĻŋāϟ āĻšā§āϝāĻžāĻ¨ā§āĻĄā§‡āϞ āĻ•āϰāĻŦ⧇āĨ¤

āĻāĻ•āϟāĻŋ āϞāĻ•ā§āώāĻŖā§€ā§Ÿ āĻŦāĻŋāώ⧟ āĻšāϞ⧋ āφāĻŽāϰāĻž handleSubmit āĻĢāĻžāĻ‚āĻļāύ⧇āϰ āĻŦāĻĄāĻŋāϤ⧇ event.preventDefault() āϞāĻŋāϖ⧇āĻ›āĻŋāĨ¤ āĻāϟāĻŋ āĻĢāĻ°ā§āĻŽ āϏāĻžāĻŦāĻŽāĻŋāĻŸā§‡āϰ āϏāĻŽā§Ÿ āĻĒ⧇āϜ āϰāĻŋāĻĢā§āϰ⧇āĻļ āĻšāĻ“ā§ŸāĻž āĻŦāĻ¨ā§āϧ āĻ•āϰāĻŦ⧇āĨ¤

āĻāĻ–āύ āφāĻŽāϰāĻž āĻāχ Form āĻ•āĻŽā§āĻĒā§‹āύ⧇āĻ¨ā§āϟāϟāĻŋ āϝ⧇āϕ⧋āύ āϝāĻžā§ŸāĻ—āĻžā§Ÿ āĻŦā§āϝāĻžāĻŦāĻšāĻžāϰ āĻ•āϰāϤ⧇ āĻĒāĻžāϰāĻŦāĨ¤ āφāĻŽāĻžāĻĻ⧇āϰ āϕ⧇ āĻļ⧁āϧ⧁ āĻāĻ•āϟāĻŋ āĻšā§āϝāĻžāĻ¨ā§āĻĄā§‡āϞāĻžāϰ āĻĢāĻžāĻ‚āĻļāύ āĻĻāĻŋāϤ⧇ āĻšāĻŦ⧇ āϝ⧇āϟāĻŋ āφāĻ°ā§āϗ⧁āĻŽā§‡āĻ¨ā§āϟ āĻšāĻŋāϏāĻžāĻŦ⧇ FormData āύāĻŋāĻŦ⧇āĨ¤

				
					<Form onSubmit={handleSubmit} />