Kelola kondisi reaksi dengan formik

Sep 12, 2025

Bagaimana caranya

(Kredit Gambar: Matt Crouch)

Selamat datang di panduan kami tentang cara mengelola kondisi reaksi dengan formik. Elemen bentuk memegang nilai-nilai mereka dalam keadaan internal mereka sendiri - berturut-tanya dengan pendekatan berbasis reaksi. Untuk membuat keduanya bekerja bersama, kita perlu solusi yang lebih terlibat, seperti menggunakan komponen yang dikendalikan untuk setiap bidang.

Tetapi ada lebih banyak aspek untuk membuat formulir daripada hanya menangkap data. Kita perlu memeriksa formatnya benar, semua bidang yang diperlukan telah diatur dan bahwa semuanya telah dikirim dengan sukses saat dikirim. Itu mengarah pada banyak logika yang rumit yang dapat menumpuk dengan cepat. Di sinilah formik dapat membantu.

Untuk lebih banyak sumber daya untuk membantu meningkatkan desain web Anda, lihat ikhtisar kami Alat Desain Web. dan penyimpanan awan pilihan. Mulai dari awal? Pilihlah yang benar Pembangun Situs Web dan dapatkan hosting web. Layanan langsung dengan roundups kami.

Unduh file sumber

Apa itu formik?

Formik adalah perpustakaan ringan yang menangani masalah ini. Dengan membungkus formulir dengan komponen yang disediakan, kami mendapatkan banyak perilaku ini secara gratis. Yang perlu kita suplai adalah kode untuk menangani apa yang membuat bentuk kita unik.

Untuk membantu kami mengeksplorasi apa yang dapat dilakukan Formik, kami akan membangun aplikasi pemungutan suara kecil. Pengguna dapat memasukkan nama mereka dan memberikan suara pada salah satu opsi yang disediakan. Jika semuanya baik-baik saja, formulir akan mengirimkan tetapi, jika tidak, pengguna menerima pesan kesalahan.

01. Mulai

Untuk memulai, buka direktori 'tutorial' dari file tutorial pada baris perintah. Instal dependensi dan mulai server. Aplikasi ini dibangun di atas aplikasi Buat-REACT dan termasuk paketnya, bersama dengan Formik itu sendiri dan beberapa lainnya untuk membantu dengan gaya.

 & gt; NPM Install.
& gt; NPM Mulai

Server pengembangan akan dimulai dan aplikasi kemudian terbuka di browser. File App.js mengontrol seluruh aplikasi yang akan membuat komponen wadah kami untuk formulir. Buka src / app.js. dan impor & lt; votecontainer & gt; komponen.

 Impor Votecontainer dari "./votecontainer";

Kemudian tambahkan ke dalam aplikasi.

 & lt; bagian ClassName = "Vote-Container" & gt;
  & lt; votecontainer / & gt;
& lt; / section & gt;

02. Buat formulir formik

Formulir formik dapat dibuat dengan dua cara. Itu withformik komponen orde tinggi memungkinkan kita untuk membungkus komponen yang ada atau menggunakan & lt; formik & gt; Komponen dengan prop render yang melakukan fungsi yang sama, yang akan kami gunakan.

Di dalam Votecontainer.js, buat komponen fungsional yang akan menampung semua logika untuk formulir. Ini mengembalikan A. & lt; formik & gt; komponen yang membuat formulir kami. Memberikan nilai awal untuk bidang yang akan kami tambahkan nanti melalui InitialValue. menopang.

 impor {formik} dari "formik";
Impor suara dari "./Vote";

Fungsi Votecontainer () {
  kembali & lt; formik
    InitialValue = {{nama: "", Jawab: ""}}
render = {props = & gt; & lt; suara {... alat peraga} / & gt;} / & gt;

03. Buat komponen suara

Itu & lt; vote & gt; Komponen memegang struktur bentuk. Dengan memiliki logika formik terpisah, kami dapat menyimpan komponen formulir sesederhana mungkin.

Buat komponen suara di dalam vote.js yang memanfaatkan & lt; form & gt; komponen dari formik. Tambahkan tombol untuk mengirimkan formulir seperti biasa.

 impor {form} dari "formik";
Vote Fungsi () {
  kembali (
    & lt; form classname = "VOTE" & GT;
      & lt; input type = "kirim" nilai = "Vote sekarang" / & gt;
    & lt; / form & gt;
  );
}

04. Tambahkan bidang

Formik melacak perubahan pada setiap bidang dan akan menyediakannya setelah formulir dikirimkan. Itu semua ini melalui peristiwa yang dipancarkan dari formulir dan setiap bidang di dalamnya.

Pada tingkat formulir ada dua acara spesifik - kirim dan reset. Ketika formulir formulir, kita perlu formik untuk mengambil alih dan melakukan pemeriksaannya, dengan acara reset membersihkan keadaan. Yang diimpor & lt; form & gt; Komponen mengikat peristiwa ini ke formik.

Kita sekarang dapat mulai menambahkan bidang pertama kami. Setiap suara perlu disertai dengan nama, yang berarti kita memerlukan input teks terlebih dahulu.

Itu & lt; bidang & gt; komponen melakukan pekerjaan yang sama dengan & lt; form & gt; lakukan untuk seluruh bentuk. Ini mengikat peristiwa dan alat peraga yang diperlukan seperti nama dan nilai untuk menampilkan keadaan bidang.

Tambahkan bidang ke formulir dan hubungkan ke label. Pekerjaan ini seperti yang mereka lakukan dalam bentuk HTML biasa.

 impor {field} dari "formik";
& lt; label htmlfor = "nama" & gt; nama & lt; / label & gt;
& lt; field autocomplete = "nama" id = "nama" name = "nama" type = "text" / & gt;

05. Pasokan Logika

Kami tidak perlu bekerja dengan acara browser untuk mengirimkan, sebagai onsubmit. Acara ditangani untuk kita. Tetapi kita perlu menyediakan logika untuk menangani pengajuan. Panggilan balik masih disebut onsubmit. tetapi itu malah menerima nilai formulir secara langsung. Ini juga menerima 'tas' - objek yang berisi beberapa metode untuk berinteraksi dengan formulir saat mengirimkan.

Karena data ini biasanya akan menuju ke server, fungsi ini juga bisa menjadi asinkron. Formik memiliki spesial Issubmitting. Prop yang ditetapkan untuk benar secara otomatis setelah pengiriman dimulai. Dengan fungsi async, kita bisa menunggu sampai formulir telah mengirimkan dan mengaturnya kembali ke false.

Kembali ke dalam Votecontainer.js, kita dapat menambahkan logika kiriman kami. Buat fungsi dan lewati ke & lt; formik & gt; komponen. Untuk contoh ini, kami tidak akan mengirim ke server tetapi kami dapat menggunakan janji yang tertunda untuk mensimulasikan latensi jaringan.

 const onsubmit = async (nilai, tas) = & gt; {
    menunggu janji baru (resolusi = & gt; setimeout (menyelesaikan, 1000));
    bag.setsubmitting (false);
    konsol.log ("formulir yang disampaikan", nilai-nilai);
  };
Kembali & lt; formik [...] onsubmit = {onsubmit} / & gt ;;

06. Tampilkan State.

Kita juga perlu menampilkan bahwa mengirimkan keadaan dalam formulir. Untuk mencegah kiriman ganda, kami dapat menonaktifkan tombol saat formulir tersebut dikirimkan. Formik meneruskan ini ke dalam formulir di dalam vote.js sebagai prop. Kita dapat mengeluarkan ini dan menerapkannya pada tombol.

 Vote fungsi ({issubmitting}) {[...]}
& lt; input dinonaktifkan = {issubmitting} Type = "Kirim" nilai = "Vote Now" / & gt;

07. Tambahkan bidang Nama

Saat ini formulir dapat diserahkan tanpa nama yang dimasukkan. Karena ini adalah bidang yang diperlukan, kita harus menandai ini kepada pengguna.

Akar & lt; formik & gt; Komponen juga mengambil prop validasi, yang merupakan fungsi yang melakukan validasi dan mengembalikan objek. Setiap pasangan nilai kunci mewakili bidang dan pesan kesalahan. Jika suatu bidang tidak memiliki nilai dalam objek ini, ia dianggap valid. Formulir hanya akan dikirimkan ketika fungsi ini mengembalikan objek kosong. Fungsi tersebut menerima nilai formulir sebagai argumen. Untuk bidang yang diperlukan, kami hanya perlu memeriksa nilainya bukan string kosong.

Kembali ke dalam Votecontainer.js, buat fungsi panggilan balik yang valid untuk memeriksa nilai ini dan menghubungkannya ke formik.

 Const Validate = Nilai = & gt; {
    kesalahan const = {};
    if (nilainya.name === "") {
      kesalahan.Name = "nama diperlukan";
    }
    KESALAHAN KEMBALI;
  };
Return & lt; formik [...] Validasi = {validate} / & gt ;;

08. Tampilkan kesalahan

Kesalahan ini kemudian diteruskan ke Vote.JS sebagai prop kesalahan. Untuk menampilkan kesalahan inline, kita perlu mencocokkan kesalahan ke bidang formulir tertentu.

 Vote fungsi ({issubmitting, kesalahan, disentuh}) {[...]}
& lt; div classname = "input-group" & gt;
  & lt; label htmlfor = "nama" & gt; nama & lt; / label & gt;
  & lt; div
    classname = {classnames ({{
      "Validation-Group": Benar,
      Kesalahan: !! kesalahan.name & amp; & amp; disentuh.name.
    })}
  & gt;
    & lt; field autocomplete = "nama" id = "nama" name = "nama" type = "text" / & gt;
    {!! kesalahan.name & amp; & amp; Touched.Name & amp; & amp; (
      & lt; div classname = "Pesan-kesalahan" & gt; {errors.name} & lt; / div & gt;
    )}
  & lt; / div & gt;
& lt; / div & gt;

Formik akan memvalidasi formulir setiap kali memperbarui. Bentuk dengan banyak bidang akan segera dibanjiri dengan kesalahan setelah perubahan pertama. Untuk menghindari ini, kami hanya menampilkan kesalahan ketika suatu bidang telah 'disentuh', artinya telah berinteraksi dengan pada beberapa titik. Ketika formulir formulir, formik akan menyentuh semua bidang dan menunjukkan kesalahan tersembunyi.

09. Tambahkan bidang jawaban

Dengan bidang nama lengkap, kami dapat pindah ke jawaban. Pendekatan yang telah kami gunakan sejauh ini berfungsi dengan baik untuk input teks biasa tetapi tidak cocok untuk beberapa input yang termasuk dalam nama bidang yang sama, seperti grup tombol radio.

Sementara kita bisa memasukkan banyak & lt; bidang & gt; Komponen dengan nama yang sama, kita harus menghindari mengulangi diri kita sebanyak mungkin. Sebagai gantinya, formik memungkinkan kami melewati komponen khusus ke dalam & lt; bidang & gt; yang bisa mengelolanya sebagai satu.

Itu & lt; answergroup & gt; Komponen berfungsi mirip dengan input teks. Dibutuhkan opsi prop, yang merupakan array yang berisi opsi untuk ditampilkan. Ini ditransformasikan menjadi tombol radio bergaya yang memungkinkan pengguna memilih jawaban. Sertakan komponen ini dalam Vote.js. Dengan menggunakan & lt; bidang & gt; itu melewati alat peraga yang sama dengan input nama serta ekstra apa pun, dalam hal ini PILIHAN konstan.

 Impor GroupGroup dari "./answergroup";
& lt; komponen bidang = {%GROUP} Opsi = {Options} Nama = "Jawaban" / & gt;

Akhirnya, kita perlu meminta jawaban dalam fungsi validasi kita di Votecontainer.js juga. Prosesnya ada sama dengan bidang nama.

 Jika (nilai .Angher === "") {
  Kesalahan. Jawaban = "Jawaban diperlukan";

Dengan menjaga validasi dan pengajuan logika terpisah dan menggunakan formik untuk menjahit semuanya bersama-sama, kami dapat menjaga masing-masing kecil dan mudah dimengerti.

Konten ini awalnya muncul di Net Magazine. . Baca lebih lanjut dari kami artikel desain web di sini .

Baca lebih lajut:

Cara menguji situs dan aplikasi bereaksi
6 tren desain web besar untuk 2020
Master minimalis dalam desain web

Kelola kondisi reaksi dengan formik

Apa itu formik?

01. Mulai

02. Buat formulir formik

03. Buat komponen suara

04. Tambahkan bidang

05. Pasokan Logika

06. Tampilkan State.

07. Tambahkan bidang Nama

08. Tampilkan kesalahan

09. Tambahkan bidang jawaban

Bagaimana caranya - Artikel Terpopuler

Masukkan Sikat Mixer di Photoshop

Buat menu slide-out

Buat tata letak responsif dengan grid CSS

4 Langkah Mudah untuk Meningkatkan Render Anda

branding pro bagikan bagaimana mereka memakukan suara merek

Cara merancang sampul buku di Indesign

Buat poster tipografi menggunakan Adobe InDesign

Cara membuat karakter 3D bergaya untuk game

Kategori