Borang dan Komponen Terkawal

Dalam React, borang dan komponen terkawal adalah penting untuk mengurus data borang dengan cekap. Komponen terkawal ialah komponen yang tidak mengekalkan keadaannya sendiri untuk medan input tetapi sebaliknya menerima nilai semasa dan pengendali perubahan sebagai prop. Ini membolehkan anda mempunyai satu sumber kebenaran untuk data borang, menjadikannya lebih mudah untuk diurus.

Contoh Asas Komponen Terkawal

Berikut ialah contoh mudah cara mencipta komponen terkawal dalam komponen berfungsi React:

import React, { useState } from 'react';

const MyForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
  });

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted:', formData);
    // Here you can handle form submission (e.g., sending data to an API)
  };

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

export default MyForm;

Penjelasan

1. Pengurusan Negeri:

   • Kami menggunakan useState untuk mencipta objek keadaan formData yang memegang nilai medan input.

2. Kendalikan Perubahan:

   • Fungsi handleChange mengemas kini keadaan berdasarkan input pengguna. Ia menggunakan atribut nama medan input untuk mengemas kini sifat yang betul dalam objek formData.

3. Kendalikan Hantar:

   • Fungsi handleSubmit menghalang kelakuan penyerahan borang lalai dan boleh digunakan untuk memproses data borang (cth., menghantarnya ke pelayan).

4. Input Terkawal:

   • Nilai setiap medan input dikawal oleh keadaan React, menjadikannya komponen terkawal. Penyangga nilai input ditetapkan kepada nilai keadaan yang sepadan dan acara onChange mengemas kini keadaan.

Kelebihan Komponen Terkawal

• Sumber Tunggal Kebenaran: Data borang disimpan dalam objek keadaan tunggal, menjadikannya mudah untuk diurus.
• Pengesahan dan Pemformatan: Anda boleh melaksanakan pengesahan dan pemformatan dengan mudah secara langsung dalam fungsi Ubah pemegang.
• Input Dinamik: Komponen terkawal membolehkan anda membuat borang dinamik berdasarkan keadaan, seperti menambah atau mengalih keluar medan.

Petua

• Gunakan onSubmit untuk penyerahan borang untuk mengendalikan input pengguna dengan cekap.
• Anda boleh mencipta komponen terkawal boleh guna semula untuk medan input bagi mengurangkan pertindihan kod.
• Pertimbangkan untuk menggunakan perpustakaan seperti Formik atau React Hook Form untuk borang yang lebih kompleks, kerana ia menawarkan ciri tambahan seperti pengesahan dan pengurusan keadaan yang lebih mudah.

Jangan ragu untuk bertanya sama ada anda memerlukan lebih banyak contoh atau pelaksanaan khusus!

Atas ialah kandungan terperinci Borang dan Komponen Terkawal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!