Basic Form Input

การจัดการช่องกรอกข้อมูลพื้นฐานโดยใช้ useState

Controlled Components

การใช้คอมโพเนนต์ที่ควบคุมได้เพื่อจัดการสถานะของฟอร์ม

Form Validation

การตรวจสอบความถูกต้องของฟอร์มก่อนการส่ง

import React, { useState } from 'react';

export default function ValidatedForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({ name: '', email: '' });

  const validateForm = () => {
    let valid = true;
    const errors = { name: '', email: '' };

    if (!formData.name) {
      errors.name = 'Name is required';
      valid = false;
    }

    if (!formData.email) {
      errors.email = 'Email is required';
      valid = false;
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      errors.email = 'Email address is invalid';
      valid = false;
    }

    setErrors(errors);
    return valid;
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (validateForm()) {
      alert('Form submitted successfully!');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" name="name" value={formData.name} onChange={handleChange} />
        {errors.name && <span>{errors.name}</span>}
      </label>
      <br />
      <label>
        Email:
        <input type="email" name="email" value={formData.email} onChange={handleChange} />
        {errors.email && <span>{errors.email}</span>}
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

Form with File Input

การจัดการฟอร์มที่มีช่องกรอกไฟล์

import React, { useState } from 'react';

export default function FileInputForm() {
  const [file, setFile] = useState(null);

  const handleFileChange = (event) => {
    setFile(event.target.files[0]);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    if (file) {
      alert('File selected: ' + file.name);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Upload file:
        <input type="file" onChange={handleFileChange} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}

Form with Controlled and Uncontrolled Inputs

การจัดการฟอร์มที่มีช่องกรอกข้อมูลควบคุมและไม่ควบคุม

import React, { useState, useRef } from 'react';

export default function MixedForm() {
  const [controlledValue, setControlledValue] = useState('');
  const uncontrolledRef = useRef(null);

  const handleControlledChange = (event) => {
    setControlledValue(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(`Controlled value: ${controlledValue}\nUncontrolled value: ${uncontrolledRef.current.value}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Controlled input:
        <input type="text" value={controlledValue} onChange={handleControlledChange} />
      </label>
      <br />
      <label>
        Uncontrolled input:
        <input type="text" ref={uncontrolledRef} />
      </label>
      <br />
      <button type="submit">Submit</button>
    </form>
  );
}