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({ name: '', age: 0 });
function handleInputChange(event: React.ChangeEvent) {
const { name, value } = event.target;
setFormData({ ...formData, [name]: value });
}
function handleSubmit(event: React.FormEvent) {
event.preventDefault();
onSubmit(formData);
}
return (
);
}
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 āύāĻŋāĻŦā§āĨ¤