Panduan lengkap untuk membentuk pengendalian dalam reaksi

Gunakan komponen terkawal dengan mengikat nilai input untuk bertindak balas dengan onchange untuk memastikan pengurusan negeri yang boleh diramal. 2. Mengendalikan pelbagai input dengan cekap dengan menggunakan objek negeri tunggal dan mengemas kini secara dinamik melalui atribut nama. 3. Hantar borang menggunakan Onsubmit dengan PencegahanDefault untuk mengelakkan memuat semula halaman dan melaksanakan pengesahan sama ada pada hantar atau dalam masa nyata. 4. Menguruskan kesilapan dengan menyimpannya dalam keadaan, mengesahkan input, dan memaparkan maklum balas pengguna secara kondusif. 5. Borang penetapan semula selepas penyerahan atau prefill mereka dengan data sedia ada dengan memulakan keadaan dari prop. 6. Mengadopsi perpustakaan seperti Borang Hook React untuk kes-kes penggunaan kompleks yang melibatkan prestasi, medan bersarang, atau pengesahan terbina dalam, yang mengurangkan semula dan memudahkan logik bentuk. Sentiasa mengesahkan, memberikan maklum balas yang jelas, dan skala pendekatan anda seperti yang diperlukan.

Borang pengendalian dalam React mungkin kelihatan mudah pada mulanya, tetapi apabila aplikasi anda berkembang, menguruskan keadaan, pengesahan, dan maklum balas pengguna dengan cekap menjadi penting. Tidak seperti bentuk HTML tradisional, React menggalakkan pendekatan yang lebih terkawal dan boleh diramal. Berikut adalah panduan praktikal untuk menguasai pengendalian bentuk dalam React - dari asas -asas kepada amalan terbaik.

1. Komponen terkawal: Cara Reaksi

Dalam React, komponen terkawal adalah standard untuk mengendalikan input bentuk. Ini bermakna data bentuk dikendalikan oleh keadaan React, bukan oleh DOM.

Daripada membiarkan input menguruskan nilai sendiri, anda mengikat value prop ke keadaan komponen dan mengemas kini melalui onChange .

 fungsi nama () {
  const [nama, setName] = useState ('');

  kembali (
    <form>
      <label>
        Nama:
        <input
          type = "Text"
          value = {name}
          onChange = {(e) => setName (e.target.value)}
        />
      </label>
      <p> hello, {name}! </p>
    </form>
  );
}

Mengapa ini penting:

• Anda sentiasa mempunyai akses kepada nilai input semasa.
• Mudah untuk melaksanakan pengesahan masa nyata atau pemformatan.
• Membolehkan tingkah laku dinamik (contohnya, melumpuhkan butang berdasarkan input).

Petua: Sentiasa gunakan onChange untuk mengemas kini keadaan - jangan biarkan value tidak terkawal sebaik sahaja anda mula mengurusnya.

2. Mengendalikan pelbagai input

Apabila bentuk berkembang, anda akan mempunyai pelbagai bidang. Daripada menulis setter untuk setiap, gunakan objek negeri tunggal dan kemas kini secara dinamik.

 fungsi userForm () {
  const [formData, setFormData] = useState ({
    Nama: '',
    E -mel: '',
    Umur: '',
  });

  const handlechange = (e) => {
    const {name, value} = e.Target;
    setFormData ((prev) => ({
      ... Sebelumnya,
      [Nama]: Nilai,
    }));
  };

  kembali (
    <form>
      <input name = "name" value = {formdata.name} onChange = {handlechange} placeholder = "name" />
      <input name = "email" value = {formData.email} onChange = {handlechange} placeholder = "email" />
      <input name = "usia" nilai = {formdata.age} onChange = {handlechange} placeholder = "usia" />
    </form>
  );
}

Mata Utama:

• Gunakan atribut name untuk mengenal pasti medan mana yang berubah.
• Sebarkan keadaan sebelumnya untuk memelihara bidang lain.
• Bekerja hebat untuk teks, e -mel, nombor, dan juga kotak pilihan dengan tweak kecil.

Untuk kotak semak:

 <input
  type = "ceckbox"
  Nama = "Langgan"
  diperiksa = {formData.Subscribe}
  onChange = {(e) => setFormData (prev => ({... prev, langgan: e.target.checked})}
/>

3. Borang Penyerahan dan Pengesahan

Gunakan pengendali onSubmit untuk memproses data borang. Cegah Muat semula Halaman Lalai dengan preventDefault() .

 const handlesubmit = (e) => {
  E.PreventDefault ();

  // Pengesahan asas
  jika (! formdata.name ||! formdata.email) {
    amaran ('sila isi semua bidang');
    kembali;
  }

  console.log ('borang yang dikemukakan:', formdata);
  // Hantar ke API, borang tetapkan semula, dll.
};

Tambahnya ke borang anda:

 <form onSubmit = {handlesubmit}>
  {/ * input */}
  <Button Type = "Hantar"> Hantar </butang>
</form>

Strategi Pengesahan Biasa:

• Pemeriksaan sebaris: Sahkan pada hantar (mudah, baik untuk permulaan).
• Pengesahan masa nyata: Tunjukkan kesilapan sebagai jenis pengguna.
• CHONCE CHOICK: Ekstrak Logik Seperti useForm untuk kebolehgunaan semula.

4. Menguruskan kesilapan dan maklum balas

Tunjukkan pengguna apa yang salah. Simpan kesilapan dalam keadaan dan paparkannya secara kondusif.

 const [ralat, setErrors] = useState ({});

const validate = () => {
  const NewErrors = {};
  jika (! formdata.name) newerrors.name = 'Nama diperlukan';
  jika (! formdata.email) {
    newerrors.email = 'E -mel diperlukan';
  } else if (! /\ s @\ s \. \ s /.test(formData.email)) {
    newerrors.email = 'E -mel tidak sah';
  }
  kembali NewErrors;
};

const handlesubmit = (e) => {
  E.PreventDefault ();
  const NewErrors = validate ();
  jika (object.keys (NewErrors) .length> 0) {
    setErrors (NewErrors);
  } else {
    setErrors ({});
    console.log ('Borang sah:', formdata);
  }
};

Di JSX:

 {errors.name && <p style = {{color: &#39;red&#39;}}> {errors.name} </p>}
<input name = "name" value = {formData.name} onChange = {HandLechange} />

5. Menetapkan semula dan membentuk bentuk

Selepas diserahkan, anda mungkin mahu membersihkan borang:

 setFormData ({name: '', e -mel: '', umur: ''});

Atau menetapkan semula ke nilai lalai menggunakan fungsi reset :

 const handlereset = () => {
  setFormData ({name: '', e -mel: '', umur: ''});
  setErrors ({});
};

Untuk mengedit data sedia ada, memulakan keadaan dengan alat peraga:

 fungsi editUserForm ({user}) {
  const [formData, setFormData] = useState (pengguna); // prefill
  // ...
}

6. Bilakah menggunakan perpustakaan (seperti Borang Hook React)

Untuk bentuk kompleks (medan dinamik, data bersarang, pengesahan async), pertimbangkan perpustakaan.

Borang Hook React popular kerana ia:

• Mengurangkan semula semula dengan menggunakan input yang tidak terkawal dengan ref.
• Mengintegrasikan dengan perpustakaan pengesahan (YUP, ZOD).
• Memudahkan pengendalian array medan (contohnya, pelbagai alamat).

Contoh dengan Borang Hook React:

 import {useForm} dari 'react-hook-form';

fungsi hookform () {
  const {register, handlesubmit, formState: {errors}} = useForm ();

  const onsubmit = (data) => {
    console.log (data);
  };

  kembali (
    <form onSubmit = {handlesubmit (onsubmit)}>
      <input {... daftar ("nama", {diperlukan: true})} />
      {errors.name && <p> Nama diperlukan </p>}

      <input {... daftar ("e -mel", {diperlukan: benar, corak: /^\ s @\ s $ /i})} />
      {errors.email && <p> e -mel tidak sah </p>}

      <Button Type = "Hantar"> Hantar </butang>
    </form>
  );
}

Gunakannya bila:

• Anda mempunyai bentuk yang besar atau kompleks.
• Prestasi adalah kebimbangan (lebih sedikit penahan semula).
• Anda mahukan pengesahan dan pengendalian ralat terbina dalam.

Petua akhir

• Sentiasa gunakan type="button" vs type="submit" - Butang di dalam bentuk lalai untuk submit , yang boleh mencetuskan penyerahan yang tidak diinginkan.
• Gunakan disabled pada butang Hantar semasa panggilan API untuk mengelakkan penyerahan dua kali.
• Kesalahan jelas mengenai perubahan input jika anda mahukan pengalaman ralat "hilang".
• Perkara-perkara kebolehcapaian: Gunakan label yang betul, aria-invalid , dan pemesejan ralat.

Pengendalian bentuk dalam React tidak perlu sukar. Mulakan dengan komponen terkawal dan digunakan, kemudian skala sehingga cangkuk atau perpustakaan tersuai seperti yang diperlukan. Kuncinya adalah menjaga keadaan yang boleh diramal dan maklum balas pengguna jelas.

Pada asasnya, mengawal input, mengesahkan penyerahan, tunjukkan kesilapan, dan memutuskan kapan untuk melampaui reaksi vanila.

Atas ialah kandungan terperinci Panduan lengkap untuk membentuk pengendalian dalam reaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!