با استفاده از کتابخانه Formik می توانید خیلی راحت یک فرم بسازید.
ابتدا Formik را نصب کنید:
در کامپوننت App
کد زیر را قرار دهید:
به جای قسمت TODO کد زیر را قرار دهید:
و به جای محتوای قسمت return
، کد زیر را قرار دهید:
توضیح:
با کمک متد useFormik
می توانید یک آبجکت از نوع formik بسازید که پارامترهای زیر را دارد:
initialValues
: نام فیلدها و مقدار اولیه شان را مشخص می کند.onSubmit
: متدی که بعد از سابمیت شدن فرم اجرا می شود. (مثلاً برای ثبت داده ها در دیتابیس ، ما اینجا فقط داده را را نمایش می دهیم)handleSubmit
errors
touched
values
handleChange
handleBlur
دقت کنید که باید برای هر فیلد ورودی یک name مشخص کنیم که بتوانیم در قسمت های مختلف کد به عنوان کلید از آن استفاده کرده و به محتوا و پارامترهای دیگر آن فیلد دسترسی داشته باشیم.
فرمی که ساختیم 4 فیلد ورودی بصورت زیر دارد:
برای validation هر فیلد هم می توانید از این پست استفاده کنید.
- نفیسه افقی 2 سال قبل پاسخ داد
- آخرین ویرایش 2 سال قبل
- شما باید برای ارسال دیدگاه وارد شوید