کتابخانه Formik در ری اکت برای ساخت و مدیریت فرم !
کتابخانه Formik در ری اکت با ویژگی ها و قابلیت هایی که داره به ما اجازه میده در کمترین زمان ممکن فرم های بهینه و پیشرفته با قابلیت اعتبار سنجی بسازیم 🙂
ساختن فرم های پیچیده در ری اکت و اضافه کردن قابلیت های پیشرفته مثل اعتبار سنجی به اون، میتونه زمانبر و خسته کننده باشه! کتابخانه Formik در React برای حل این چالش به ما کمک میکنه ..
با فِرانت اِندی همراه باشید تا این کتابخانه قدرتمند و محبوب ری اکتی رو بررسی کنیم 🙂
بیش از 2,395,000 دانلود هفتگی در NPM !
کتابخانه Formik چیست ؟
Formik یک کتابخانه ی متن باز و محبوبه که به ما امکان ساخت و مدیریت فرم های پیشرفته در ری اکت رو میده.
کتابخانه Formik چندین کامپوننت و تابع جذاب در اختیار ما گذاشته که باعث شده کار با فرم ها در ری اکت جذاب تر از همیشه باشه 🙂
حالا شاید این سوال برامون پیش بیاد که اصلا چه نیازی به کتابخانه هایی مثل کتابخانه React Hook Form یا همین Formik برای ایجاد و مدیریت فرم ها داریم ؟؟
ایجاد و مدیریت دستی فرم ها ( بدون کتابخانه )
زمانیکه از روش سنتی برای ایجاد و مدیریت فرم ها در ری اکت استفاده میکنیم، باید به ازای هر فیلد ورودی ( input ) یک هوک useState در ری اکت بسازیم جهت ذخیره اون مقدار ورودی!
یا حتی برای هر فیلد ورودی یک event Listener بسازیم!
نکته اینجاست که علاوه بر کثیف و شلوغ کردن کامپوننت خودمون، با ایجاد re-render های اضافی توسط فرم، باعث کاهش بهینگی اپیکیشن خودمون میشیم!
تو کامپوننت زیر، از روش سنتی برای ساخت و مدیریت فرم استفاده کردیم:
// Infuriating traditional react form management method
import { useState } from "react";
function InputForm() {
const [input1, setInput1] = useState("");
const [input2, setInput2] = useState("");
const handleInputChange = (event) => {
const { name, value } = event.target;
if (name === "input1") {
setInput1(value);
} else if (name === "input2") {
setInput2(value);
}
};
const handleSubmit = (event) => {
// . . .
};
return (
<form onSubmit={handleSubmit}>
<input name="input1" value={input1} onChange={handleInputChange} />
<input name="input2" value={input2} onChange={handleInputChange} />
<button type="submit">تایید و ارسال</button>
</form>
);
}
export default InputForm;
کامپوننت بالا خیلی کثیف و شلوغ شده و اصلا بهینه نیست ( کامپوننت Performance ضعیفی داره ) !
کتابخانه Formik در ریکت در پشت صحنه تمامی موارد بالارو مدیریت میکنه و باعث میشه کامپوننت ما Performance خوبی داشته باشه. تو تیکه کد زیر، همون کامپوننت بالارو به کمک Formik نوشتیم:
<Formik
onSubmit={(formData) => {
console.log(formData);
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="text" name="fullname" placeholder="Enter fullname" />
<Field type="email" name="email" placeholder="Enter address" />
<button type="submit">تایید و ارسال</button>
</Form>
)}
</Formik>;
میبینیم که کتابخانه Formik چقدر کار رو برای ما ساده تر کرده!
کتابخانه Formik در React علاوه بر ساخت و مدیریت فرم، به ما اجازه داده که Form Validation ( اعتبار سنجی فرم ) رو پیاده سازی کنیم. همچنین به کمک Formik تونستیم وضعیت ارسال داده های فرم به سرور و خطاهای اون رو مدیریت کنیم.
بریم ببینیم چطور میشه Formik در ری اکت رو نصب و ازش استفاده کرد ..
آموزش نصب Formik در ری اکت
برای نصب کتابخانه Formik در ریکت، ابتدا یک پروژه جدید ری اکتی ایجاد میکنیم :
npx create-react-app my-app
cd my-app
npm start
پس از ایجاد پروژه ری اکتی و Start کردن پروژه، باید کتابخانه Formik رو نصب کنیم :
npm install formik --save
حالا که کتابخانه Formik رو نصب کردیم، میتونیم از ویژگی ها و قابلیت های این کتابخانه ارزشمند استفاده کنیم 🙂
بصورت زیر میتونیم کامپوننت ها و ویژگی های اصلی کتابخانه Formik رو وارد کامپوننت خودمون کنیم:
import { Formik, Form, Field, ErrorMessage } from 'formik';
حالا شاید این سوال برامون پیش بیاد که موارد بالا چی هستن که فراخوانیشون کردیم!
کامپوننت Form :
کامپوننت Form شامل تمام ویژگی های مورد نیاز ما در زمینه ایجاد فرم میشه. کامپوننت Form به ما در زمینه مدیریت فرم، اعتبار سنجی فرم و ارسال فرم کمک میکنه.
کامپوننت Field :
کامپوننت Field به ما در زمینه ایجاد فیلد های فرم کمک میکنه. از کامپوننت Field میتونیم برای مشخص کردن فیلد ورودی در فرم استفده کنیم.
کامپوننت Field میتونه مقدار هر فیلد و اعتبارسنجی مقدارش رو مدیریت کنه.
کامپوننت ErrorMessage :
زمانیکه اعتبارسنجی یک فیلد با خطا مواجه میشه، کامپوننت ErrorMessage به ما در زمینه نمایش خطا برای هر فیلد، به ما کمک میکنه.
خود کامپوننت Formik رو هم در ادامه بررسی میکنیم …
چطور یک فرم به کمک Formik بسازیم ؟
ما میتونیم یک فرم بسازیم و تمامی اجزای اون فرم رو داخل کامپوننت Formik قرار بدیم.
تو تیکه کد زیر، ما یک فرم به کمک کتابخانه Formik در ری اکت ساختیم :
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
function App() {
return (
<div className="App">
<center>
<h1>Register a new account</h1>
<Formik>
{({ isSubmitting }) => (
<Form>
<Field
type="text"
name="fullname"
placeholder="Enter your fullname"
/>
<ErrorMessage name="fullname" component="div" />
<Field
type="email"
name="email"
placeholder="Enter email address"
/>
<ErrorMessage name="email" component="div" />
<Field type="password" name="password" />
<ErrorMessage name="password" component="div" />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</center>
</div>
);
}
export default App;
تو تیکه کد بالا، ما تمام اجزای فرم ( فیلد های ورودی ) ، اعتبار سنجی و تابع ارسال رو داخل کامپوننت Formik قرار دادیم. کامپوننت Field ، ورودی هر فیلد فرم رو مشخص میکنه مثل نام، ایمیل، رمز و ..
همچنین کامپوننت ErrorMessage خطاهای اعتبارسنجی فرم رو برای هر فیلد به کاربر نشون میده.
اگه به خط 28 نگاه کنیم، میبینیم که از مقدار disabled={isSubmitting} استفاده کردیم. این یعنی زمانیکه فرم ما درحال ارسال اطلاعات به سرور هست، دکمه ارسال غیرفعال بشه.
حالا ما باید مقدار اولیه فیلد های فرم رو مشخص کنیم. تو تیکه کد زیر، مقدار اولیه فیلد های فرم رو مشخص کردیم:
<Formik initialValues={{ fullname: "", email: "", password: "" }}>
اعتبار سنجی فرم با کتابخانه Formik ( همون Form Validation )
ما فرم خودمون رو ساختیم. زمانیکه فرم خودمون رو میسازیم باید از ورود اطلاعات اشتباه به فرم خودمون جلوگیری کنیم!
بطور مثال در فیلد شماره تلفن کاربر، باید از ورود شماره تلفن با طول بیشتر یا کمتر از 11 رقم جلوگیری کنیم چون باعث خطا در سرور خواهد شد!
اعتبارسنجی فرم از اهمیت خیلی بالایی برخورداره، پیشنهاد میشه برای تمامی فرم های خودمون از Form Validation استفاده کنیم.
کتابخانه Formik در ریکت، به ما امکان اعتبارسنجی فرم هارو میده. تو تیکه کد زیر ما Form Validation رو به فرم خودمون اضافه کردیم :
<Formik
initialValues={{ fullname: "", email: "", password: "" }}
validate={(values) => {
const errors = {};
if (!values.fullname) {
errors.fullname = "Required";
}
if (!values.email) {
errors.email = "Required";
} else if (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
) {
errors.email = "Invalid email address";
}
if (!values.password) {
errors.password = "Required";
}
return errors;
}}
>
تو تیکه کد بالا، ما یک تابع برای Validation ( اعتبار سنجی فرم ) مشخص کردیم. این تابع هر زمان که کاربر با فرم ارتباط برقرار کنه، صدا زده میشه تا داده ها اعتبارسنجی بشن.
ارسال اطلاعات فرم به سرور
کتابخانه Formik یک تابع onSubmit در اختیار ما میزاره. هر فرم یک دکمه “تایید” داره و زمانیکه کاربر روی این دکمه کلیک میکنه، تابع onSubmit صدا زده میشه.
در مرحله اول داده های فرم به وسیله تابع Validation اعتبار سنجی میشن، سپس درصورت عدم وجود خطا، به سرور ارسال میشن.
تو تیکه کد زیر، تابع onSubmit رو نوشتیم :
<Formik
initialValues={{ fullname: "", email: "", password: "" }}
// . . .
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
تابع onSubmit زمانی اجرا میشه که کاربر روی دکمه “تایید” کلیک کنه.
تو مثال بالا، ما اطلاعات فرم رو صرفا به خود کاربر به وسیله alert نمایش میدیم.
اما شما میتونید به وسیله کتابخانه Axios در ری اکت همین اطلاعات رو به سرور ارسال کنید.
جمع بندی
کتابخانه Formik در React یک کتابخانه محبوب و قدرتمند در جهت ایجاد و مدیریت فرم های ری اکت هست.
باتوجه به اینکه Formik به ما اجازه میده در کمترین زمان ممکن فرم های پیچیده و بهینه بسازیم و ویژگی های خیلی زیادی مثل اعتبار سنجی و مدیریت خطا رو بهش اضافه کنیم، پیشنهاد میشه از روش سنتی ایجاد و مدیریت فرم استفاده نکنیم!!
کتابخانه فرمیک در ری اکت یک کتابخانه محبوب و قدرتمند در جهت ایجاد و مدیریت فرم های ری اکت هست.
طبق تجربه شخصی و بررسی هایی که انجام دادیم، کتابخانه React Hook Form بازدهی و عملکرد بهتری داره.
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام
اگه دوتا فرم با formik توی صفحه داشته باشیم جفتشون اطلاعات رو ثبت نمیکنه.برای رفع این موضوع چه راه حلی رو پیشنهاد میکنبد؟
سلام رفیق
کاملا درسته، اولین کاری که میتونی بکنی جدا کردن هر کامپوننت ( که شامل یک فرم میشه ) هست.
و دقت کن که هر فیلد Names های یونیک داشته باشه.