React Hook Form: راهنمای کامل با React (2024)

سرفصل ها و درس ها

خوش آمدید! Welcome Aboard!

• پیش نمایش دوره Course Preview

• ساختار دوره Course Structure

• مقدمه ای بر React Hook Form Introduction to React Hook Form

• چگونه در منابع دوره پیمایش کنیم؟ How to Navigate Course Resources ?

• از کجا می توانم کمک بیشتری پیدا کنم؟ Where Can I Find More Assistance?

مشکل ایجاد فرم معمولی چیست؟ What’s Wrong with Normal Form Creation?

• بیایید از صفر شروع کنیم Let's Start from Scratch

• مشکلات با روش های معمولی ایجاد فرم های واکنش Difficulties with Normal Ways of Creating React Forms

• بیایید استفاده از React Hook Form را شروع کنیم Let’s Start Using React Hook Form

اصول RHF Fundamentals of RHF

• چگونه یک کنترل فرم ثبت نام کنیم؟ How to Register a Form Control?

• افزایش عملکرد در RHF در مقابل فرم معمولی Performance Gain in RHF Vs Normal Form

• مقادیر پیش فرض را به کل فرم ارسال کنید Pass Default Values to the Entire Form

اعتبار سنجی در RHF Validation in RHF

• قوانین اعتبار سنجی را تعریف کنید Define Validation Rules

• چگونه از اعتبار سنجی استفاده کنیم؟ How to make use of Validation?

• اعتبار سنجی سفارشی را تعریف کنید Define Custom Validation

سازماندهی فرم با اجزای قابل استفاده مجدد Organizing the Form with Reusable Components

• اجزای قابل استفاده مجدد برای فیلدهای ورودی Reusable Components for Input Fields

• یک لیست کشویی با RHF اضافه کنید Add a Dropdown List with RHF

فیلدهای فرم تودرتو و اجزای فرم قابل استفاده مجدد Nested Form Fields & Reusable Form Components

• فیلد فرم تودرتو در RHF Nested Form Field in RHF

• useFormContext برای فرم های قابل استفاده مجدد useFormContext for Reusable Forms

• فرم های پیچیده را به اجزای ظریف تقسیم کنید Divide Complex Forms into Subtle Components

فرم ویژگی های دولتی و رندر مجدد جدا شده Form State Properties & Isolated Re-rendering

• مقدمه ای بر حالت فرم Introduction to Form State

• املاک دولتی مربوط به ارسال فرم Form Submission Related State Properties

• رندر مجدد جدا شده با useFormState Isolated Re-rendering with useFormState

• useFormState با کنترل useFormState with control

• با روش getFormState خاص باشید Be Specific with getFormState Method

مقادیر کنترل فرم را گوش دهید یا تماشا کنید Listen or Watch Form Control Values

• نحوه مشاهده مقادیر کنترل فرم How to Watch Form Control Values

• استفاده از قلاب ساعت برای رندر مجدد جدا شده useWatch hook for Isolated Re-rendering

• getFieldValues() & setValue() getFieldValues() & setValue()

فیلدهای تولید شده به صورت پویا Dynamically Generated Fields

• بیایید با آرایه از فیلدها شروع کنیم Let’s Start with Array of Fields

• useFieldArray Hook useFieldArray Hook

• عملیات CRUD در آرایه های میدانی CRUD Operations within Field Arrays

• اعتبار سنجی آرایه میدانی Validation of Field Array

یک ویرایشگر جدول درون خطی عملی یا شبکه داده A Practical Inline Table Editor or Data Grid

• فهرست کشویی در یک جدول ویرایش درون خطی Dropdown List in an Inline Editing Table

• از نوع داده های مناسب از کنترل های فرم اطمینان حاصل کنید Ensure Proper Data Type from Form Controls

• نحوه برخورد با خواص متقابل How to Deal with Interdependent Properties

• کل کل را محاسبه کنید Calculate the grand total

اعتبار سنجی غیر همگام و اعتبارسنجی ماشه Async Validation and Trigger Validation

• اعتبار سنجی ناهمزمان Asynchronous Validation

• متدهای trigger() و setFocus(). trigger() & setFocus() methods

یک سفارش ایجاد کنید و همان را دوباره به فرم پر کنید Create an Order and Re-populating the Same back to the Form

• سفارش را ایجاد کنید Create the Order

• یک فرم تازه را با یک رکورد موجود پر کنید Populate a Fresh Form with an Existing Record

• متدهای shouldUnRegister() & Unregister() shouldUnRegister() & unregister() methods

نحوه تنظیم مجدد یک فرم How to Reset a Form

• متدها: reset() ، resetField() و resetOptions() Methods : reset() , resetField() & resetOptions()

• وقفه های دستی در Error Object Manual Interruptions in Error Object

اضافات متفرقه Miscellaneous Extras

• گزینه ثبت نام: deps Register Option : deps

• ارتباط آرگومان useForm: مقادیر Relevance of useForm’s argument : values

• آرگومان useForm: shouldUseNativeValidation useForm’s Argument : shouldUseNativeValidation

• گزینه ثبت نام: رجوع کنید Register Option : ref

ادغام با React UI Components Integration with React UI Components

• چرا به یک کنترلر نیاز داریم؟ Why do we need a controller?

• چگونه از کامپوننت کنترلر استفاده کنیم؟ How to Make Use of Controller Component?

• کنترل های فرم قابل استفاده مجدد با کنترلر Reusable Form Controls with Controller

• useController Hook useController Hook

ادغام با کتابخانه اعتبارسنجی طرحواره Integration with Schema Validation Library

• حل کننده از useForm Hook resolver from useForm Hook

• زمینه از useForm Hook context from useForm Hook

بعد چی؟ What Next?

• یک تشکر بزرگ! A Big Thanks!

• بعد چه چیزی یاد بگیریم؟ What to Learn Next?