Menggunakan Formik untuk mengendalikan borang dalam React

Borang web adalah penting untuk laman web dan aplikasi. Walaupun bentuk HTML asli menawarkan fungsi asas, menguruskan keadaan, pengesahan, dan penyerahan mereka boleh menjadi kompleks. React, dengan pendekatan yang didorong oleh komponennya, memudahkan pengendalian bentuk tetapi masih boleh membawa kepada kod verbose. Formik, perpustakaan ringan, dengan elegan menangani cabaran -cabaran ini, memudahkan pengurusan negeri, pengesahan, dan penyerahan.

Artikel ini menunjukkan membina bentuk bertindak balas dengan Formik, mempamerkan keupayaannya untuk mengendalikan negara, pengesahan, dan penyerahan. Kami akan bermula dengan komponen reaksi asas dan kemudian mengintegrasikan Formik.

Membina Borang Reaksi Terkawal

Komponen React bergantung kepada keadaan dan prop. Elemen bentuk HTML mengekalkan keadaan dalaman melalui atribut value mereka. Ini menjadikan mereka komponen yang tidak terkawal -DOM menguruskan negara. Walau bagaimanapun, komponen terkawal , di mana React menguruskan negara, menawarkan kawalan yang lebih baik dan satu sumber kebenaran.

Borang HTML yang tidak terkawal mungkin kelihatan seperti ini:

<div class="formRow">
  <label for="email">Alamat e -mel</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">Kata laluan</label>
  <input type="password" id="password">
</div>
<button type="submit">Hantar</button>

Menukar ini ke komponen React yang dikawal:

 fungsi htmlform () {
  const [e -mel, setemail] = react.usestate ("");
  const [kata laluan, setpassword] = react.usestate ("");

  kembali (
    

Alamat e -mel setemail (e.target.value)} />

Kata laluan setPassword (e.target.value)} />

Hantar

); }

Pendekatan ini menyediakan satu sumber kebenaran untuk nilai bentuk, membolehkan pengesahan dan pengoptimuman prestasi yang lebih mudah.

Mengapa memilih Formik?

Banyak perpustakaan pengurusan bentuk wujud untuk bertindak balas (contohnya, bentuk cangkuk reaksi, bentuk redux). Formik membezakan dirinya melalui:

1. Pendekatan Deklaratif: Abstraksi Memudahkan Negeri, Pengesahan, dan Penyerahan.
2. Escape Hatch: Menyediakan kawalan apabila diperlukan, walaupun abstraksi.
3. Negeri Terletak Bersama: Memelihara logik yang berkaitan dengan borang dalam komponen.
4. Kesesuaian: Membolehkan menggunakan sebanyak atau sedikit dari Formik seperti yang diperlukan.
5. Kemudahan Penggunaan: Mudah dan berkesan.

Mari kita mengintegrasikan Formik ke dalam komponen bentuk kami.

Melaksanakan Formik

Kami akan membuat borang log masuk asas, meneroka tiga kaedah penggunaan Formik:

1. useFormik Hook
2. Formik dengan konteks React (<formik></formik> )
3. withFormik komponen pesanan lebih tinggi

Demo memerlukan pakej Formik dan Yup.

Kaedah 1: useFormik Hook

Bentuk semasa kami tidak berfungsi. useFormik Hook menyediakan fungsi dan pembolehubah Formik. Pembalakan nilai yang dikembalikan mendedahkan kandungannya.

Kami akan menggunakan useFormik dengan initialValues dan pengendali onSubmit :

 // Komponen React
fungsi baseFormik () {
  const formik = useFormik ({
    Nilai awal: {email: "", kata laluan: ""},
    onsubmit (nilai) {
      // Bentuk logik penyerahan
    }
  });

  kembali (
    

{/ * Form Elements */}

); }

Mengikat Formik untuk membentuk elemen:

 // Komponen React
fungsi baseFormik () {
  const formik = useFormik ({
    Nilai awal: {email: "", kata laluan: ""},
    onsubmit (nilai) {
      // Bentuk logik penyerahan
    }
  });

  kembali (
    

Alamat e -mel

{/ * ... elemen bentuk lain */}

); }

Ini mengendalikan penyerahan ( onSubmit={formik.handleSubmit} ) dan keadaan input ( value , onChange melalui formik.getFieldProps ). Kami mengelakkan pengurusan negeri dan pengendalian acara manual. Memusnahkan getFieldProps dan handleSubmit meningkatkan lagi kejelasan kod.

The<formik></formik> Komponen menawarkan abstraksi selanjutnya dengan komponen terbina dalam seperti<field></field> ,<form></form> , dan<errormessage></errormessage> . Komponen ini menggunakan corak prop render.

 import {formik, medan, bentuk} dari 'formik';

fungsi formikrenderprops () {
  const initialValues ​​= {email: "", kata laluan: ""};

  const onsubmit = (nilai) => {
    amaran (json.stringify (nilai, null, 2));
  };

  kembali (
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {() => (
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ... elemen bentuk lain */}
        </form>
      )}
    </formik>
  );
}

Formik mengendalikan negeri dan penyerahan; Kami memberi tumpuan kepada struktur bentuk.

Pengesahan bentuk dengan formik

Formik menawarkan pengesahan di peringkat borang (menggunakan validate atau validationSchema ), tahap medan, atau dengan pencetus manual. Pengesahan peringkat borang mengesahkan keseluruhan borang sekaligus. validate adalah untuk pengesahan tersuai, manakala validationSchema menggunakan perpustakaan seperti Yup.

Contoh Menggunakan validate :

 const formik = useFormik ({
  // ...
  validate: () => {
    ralat const = {};
    jika (! formik.values.email) {errors.email = "diperlukan"; }
    // ... pengesahan lain
    kesilapan pulangan;
  },
  // ...
});

Contoh Menggunakan validationSchema dengan Yup:

 const formik = useFormik ({
  // ...
  ValidationsChema: yup.object (). Bentuk ({
    E -mel: yup.string (). E -mel ("e -mel tidak sah"). Diperlukan ("Diperlukan"),
    // ... pengesahan lain
  }),
  // ...
});

Pengesahan peringkat medan dan manual juga mungkin.

Kaedah 3: withFormik komponen pesanan lebih tinggi

withFormik adalah komponen pesanan yang lebih tinggi yang membungkus komponen borang anda.

Contoh praktikal

Mari kita gambarkan memaparkan mesej ralat dan menjana nama pengguna.

Memaparkan mesej ralat

Formik memudahkan paparan ralat. Semak Objek errors dan Paparan Mesej:

<label htmlfor="email">
  Alamat e -mel
  {formik.touched.email && formik.errors.email}
</label>

Atau gunakan<errormessage></errormessage> :

<errormessage name="email"></errormessage>

Menjana nama pengguna

setValues Formik boleh digunakan untuk menghasilkan nama pengguna dari e -mel:

 onsubmit (nilai) {
  formik.setValues ​​({... nilai, nama pengguna: `@$ {values.email.split ("@") [0]}`});
}

Kesimpulan

Formik dengan ketara memudahkan pengendalian bentuk reaksi. Artikel ini merangkumi asas -asas; Terokai dokumentasi Formik untuk ciri -ciri canggih dan kes penggunaan.

Atas ialah kandungan terperinci Menggunakan Formik untuk mengendalikan borang dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!