M

MLOG

فارسی

راهنمای جامع هوک useFormStatus در React برای ایجاد تجربیات ارسال فرم جذاب و آموزنده برای کاربران جهانی.

هوک useFormStatus در React: تسلط بر وضعیت ارسال فرم

فرم‌ها ستون فقرات تعداد بی‌شماری از برنامه‌های وب هستند و به عنوان ابزار اصلی برای تعامل کاربران و ارائه داده به سرورها عمل می‌کنند. تضمین یک فرآیند ارسال فرم روان و آموزنده برای ایجاد تجربیات کاربری مثبت بسیار حیاتی است. React 18 یک هوک قدرتمند به نام useFormStatus معرفی کرده است که برای ساده‌سازی مدیریت وضعیت ارسال فرم طراحی شده است. این راهنما یک بررسی جامع از useFormStatus ارائه می‌دهد و ویژگی‌ها، موارد استفاده و بهترین شیوه‌ها را برای ساخت فرم‌های قابل دسترس و جذاب برای مخاطبان جهانی بررسی می‌کند.

هوک useFormStatus در React چیست؟

useFormStatus یک هوک React است که اطلاعاتی درباره وضعیت ارسال یک فرم ارائه می‌دهد. این هوک برای کار یکپارچه با اکشن‌های سرور (server actions) طراحی شده است، ویژگی‌ای که به شما امکان می‌دهد منطق سمت سرور را مستقیماً از کامپوننت‌های React خود اجرا کنید. این هوک یک شیء حاوی اطلاعاتی درباره وضعیت در حال انتظار فرم (pending state)، داده‌ها و هر خطایی که در حین ارسال رخ داده است، برمی‌گرداند. این اطلاعات به شما امکان می‌دهد تا بازخورد آنی به کاربران ارائه دهید، مانند نمایش نشانگرهای بارگذاری، غیرفعال کردن عناصر فرم و نمایش پیام‌های خطا.

درک اکشن‌های سرور (Server Actions)

قبل از پرداختن به useFormStatus، درک اکشن‌های سرور ضروری است. اکشن‌های سرور توابع ناهمگامی هستند که روی سرور اجرا می‌شوند و می‌توانند مستقیماً از کامپوننت‌های React فراخوانی شوند. آنها با استفاده از دستورالعمل 'use server' در بالای فایل تعریف می‌شوند. اکشن‌های سرور معمولاً برای وظایفی مانند موارد زیر استفاده می‌شوند:

در اینجا یک مثال ساده از یک اکشن سرور آورده شده است:

// actions.js
'use server';

export async function submitForm(formData) {
  // شبیه‌سازی یک تأخیر برای تقلید از درخواست سرور
  await new Promise(resolve => setTimeout(resolve, 2000));

  const name = formData.get('name');
  const email = formData.get('email');

  if (!name || !email) {
    return { message: 'Please fill in all fields.' };
  }

  // شبیه‌سازی ارسال موفق
  return { message: `Form submitted successfully for ${name}!` };
}

این اکشن داده‌های فرم را به عنوان ورودی می‌گیرد، یک تأخیر را شبیه‌سازی می‌کند و سپس یک پیام موفقیت یا خطا برمی‌گرداند. دستورالعمل 'use server' به React می‌گوید که این تابع باید روی سرور اجرا شود.

هوک useFormStatus چگونه کار می‌کند

هوک useFormStatus در کامپوننتی که یک فرم را رندر می‌کند، استفاده می‌شود. این هوک باید درون یک عنصر <form> استفاده شود که از پراپ `action` با اکشن سرور وارد شده استفاده می‌کند. این هوک یک شیء با ویژگی‌های زیر برمی‌گرداند:

در اینجا مثالی از نحوه استفاده از useFormStatus در یک کامپوننت React آورده شده است:

'use client'
import { useFormStatus } from 'react-dom';
import { submitForm } from './actions';

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Name:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {error && <p style={{ color: 'red' }}>Error: {error.message}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

export default MyForm;

در این مثال:

مزایای استفاده از useFormStatus

useFormStatus چندین مزیت برای مدیریت وضعیت ارسال فرم ارائه می‌دهد:

بهترین شیوه‌ها برای استفاده از useFormStatus

برای به حداکثر رساندن مزایای useFormStatus، بهترین شیوه‌های زیر را در نظر بگیرید:

موارد استفاده از useFormStatus

useFormStatus در طیف گسترده‌ای از سناریوها قابل استفاده است:

پرداختن به بین‌المللی‌سازی (i18n)

هنگام ساخت فرم برای مخاطبان جهانی، بین‌المللی‌سازی (i18n) بسیار مهم است. در اینجا نحوه پرداختن به i18n هنگام استفاده از useFormStatus آمده است:

مثال با i18next:

// i18n.js
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en.json';
import fr from './locales/fr.json';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: { translation: en },
      fr: { translation: fr },
    },
    lng: 'en',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false, // ری‌اکت به خودی خود از حملات XSS جلوگیری می‌کند
    },
  });

export default i18n;

// MyForm.js

import { useTranslation } from 'react-i18next';

function MyForm() {
  const { t } = useTranslation();
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">{t('name')}:</label>
      <input type="text" id="name" name="name" disabled={pending} />
      <label htmlFor="email">{t('email')}:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? t('submitting') : t('submit')}
      </button>
      {error && <p style={{ color: 'red' }}>{t('error')}: {t(error.message)}</p>}
      {data && data.message && <p style={{ color: 'green' }}>{t(data.message)}</p>}
    </form>
  );
}

export default MyForm;

ملاحظات دسترسی‌پذیری

اطمینان از دسترسی‌پذیری هنگام ساخت فرم‌ها امری ضروری است. در اینجا نحوه دسترسی‌پذیرتر کردن فرم‌های خود هنگام استفاده از useFormStatus آمده است:

مثال با ویژگی‌های ARIA:

function MyForm() {
  const { pending, data, error, action } = useFormStatus();

  return (
    <form action={submitForm}>
      <label htmlFor="name">Name:</label>
      <input
        type="text"
        id="name"
        name="name"
        disabled={pending}
        aria-invalid={!!error} // نشان دادن وجود خطا
        aria-describedby={error ? 'name-error' : null} // مرتبط کردن پیام خطا
      />
      {error && (
        <p id="name-error" style={{ color: 'red' }} aria-live="polite">{error.message}</p>
      )}
      <label htmlFor="email">Email:</label>
      <input type="email" id="email" name="email" disabled={pending} />
      <button type="submit" disabled={pending}>
        {pending ? 'Submitting...' : 'Submit'}
      </button>
      {data && data.message && <p style={{ color: 'green' }}>{data.message}</p>}
    </form>
  );
}

فراتر از استفاده پایه: تکنیک‌های پیشرفته

در حالی که استفاده پایه از useFormStatus ساده است، چندین تکنیک پیشرفته وجود دارد که می‌تواند تجربه ارسال فرم شما را بیشتر بهبود بخشد:

عیب‌یابی مشکلات رایج

هنگام استفاده از useFormStatus، ممکن است با برخی مشکلات رایج مواجه شوید. در اینجا نحوه عیب‌یابی آنها آمده است:

جایگزین‌های useFormStatus

در حالی که useFormStatus ابزاری قدرتمند است، رویکردهای جایگزینی برای مدیریت وضعیت ارسال فرم وجود دارد، به ویژه در نسخه‌های قدیمی‌تر React یا هنگام کار با منطق فرم پیچیده:

انتخاب رویکرد به پیچیدگی فرم و نیازهای خاص شما بستگی دارد. برای فرم‌های ساده، useFormStatus اغلب ساده‌ترین و کارآمدترین راه‌حل است. برای فرم‌های پیچیده‌تر، یک کتابخانه فرم یا یک راه‌حل مدیریت وضعیت سراسری ممکن است مناسب‌تر باشد.

نتیجه‌گیری

useFormStatus یک افزوده ارزشمند به اکوسیستم React است که مدیریت وضعیت ارسال فرم را ساده کرده و توسعه‌دهندگان را قادر می‌سازد تا تجربیات کاربری جذاب‌تر و آموزنده‌تری ایجاد کنند. با درک ویژگی‌ها، بهترین شیوه‌ها و موارد استفاده آن، می‌توانید از useFormStatus برای ساخت فرم‌های قابل دسترس، بین‌المللی و با کارایی بالا برای مخاطبان جهانی بهره‌مند شوید. استفاده از useFormStatus توسعه را ساده می‌کند، تعامل کاربر را بهبود می‌بخشد و در نهایت به برنامه‌های وب قوی‌تر و کاربرپسندتر کمک می‌کند.

به یاد داشته باشید که هنگام ساخت فرم برای مخاطبان جهانی، دسترسی‌پذیری، بین‌المللی‌سازی و عملکرد را در اولویت قرار دهید. با پیروی از بهترین شیوه‌های ذکر شده در این راهنما، می‌توانید فرم‌هایی ایجاد کنید که برای همه، صرف نظر از موقعیت مکانی یا توانایی‌هایشان، قابل استفاده باشند. این رویکرد به ایجاد یک وب فراگیرتر و قابل دسترس‌تر برای همه کاربران کمک می‌کند.

هوک useFormStatus در React: تسلط بر وضعیت ارسال فرم برای تجربیات کاربری یکپارچه | MLOG