۱۱ شهریور ۱۴۰۴فارسی

هوک experimental_useFormStatus ری‌اکت را برای مدیریت ساده وضعیت فرم کاوش کنید. پیاده‌سازی، مزایا و کاربرد پیشرفته را با مثال‌های واقعی بیاموزید.

پیاده‌سازی experimental_useFormStatus در ری‌اکت: مدیریت پیشرفته وضعیت فرم

چشم‌انداز در حال تحول ری‌اکت به طور مداوم ابزارها و تکنیک‌هایی را برای بهبود تجربه توسعه‌دهنده و عملکرد برنامه معرفی می‌کند. یکی از این ویژگی‌های تجربی، هوک experimental_useFormStatus است که برای ساده‌سازی مدیریت وضعیت فرم، به ویژه در سناریوهای اکشن‌های سرور (server actions) و بهبود تدریجی (progressive enhancement) طراحی شده است. این راهنمای جامع، هوک experimental_useFormStatus را به تفصیل بررسی کرده و مثال‌های عملی و بینش‌هایی برای استفاده مؤثر از آن ارائه می‌دهد.

هوک `experimental_useFormStatus` چیست؟

هوک experimental_useFormStatus یک API تجربی است که توسط تیم ری‌اکت برای ارائه روشی ساده‌تر جهت ردیابی وضعیت ارسال فرم، به ویژه هنگام استفاده از اکشن‌های سرور، معرفی شده است. قبل از این هوک، مدیریت حالت‌های مختلف یک فرم (بیکار، در حال ارسال، موفق، خطا) اغلب نیازمند منطق مدیریت وضعیت پیچیده‌ای بود. experimental_useFormStatus با هدف انتزاعی کردن بخش زیادی از این پیچیدگی، روشی ساده و کارآمد برای نظارت و واکنش به حالت‌های ارسال فرم فراهم می‌کند.

مزایای کلیدی:

مدیریت ساده وضعیت: کدهای تکراری (boilerplate) مورد نیاز برای مدیریت وضعیت‌های ارسال فرم را کاهش می‌دهد.
تجربه کاربری بهتر: به‌روزرسانی‌های واکنش‌گرایانه‌تر رابط کاربری را بر اساس وضعیت فرم امکان‌پذیر می‌سازد.
خوانایی بهتر کد: درک و نگهداری کدهای مربوط به فرم را آسان‌تر می‌کند.
یکپارچه‌سازی بی‌نقص با اکشن‌های سرور: به طور خاص برای کار با کامپوننت‌های سرور ری‌اکت و اکشن‌های سرور طراحی شده است.

پیاده‌سازی پایه

برای نمایش پیاده‌سازی پایه experimental_useFormStatus، یک مثال فرم تماس ساده را در نظر می‌گیریم. این فرم نام، ایمیل و پیام کاربر را جمع‌آوری کرده و سپس آن را با استفاده از یک اکشن سرور ارسال می‌کند.

پیش‌نیازها

قبل از ورود به کد، اطمینان حاصل کنید که یک پروژه ری‌اکت با موارد زیر راه‌اندازی کرده‌اید:

نسخه ری‌اکت که از APIهای تجربی پشتیبانی می‌کند (برای نسخه مورد نیاز به مستندات ری‌اکت مراجعه کنید).
کامپوننت‌های سرور ری‌اکت فعال شده باشند (معمولاً در فریمورک‌هایی مانند Next.js یا Remix استفاده می‌شود).

مثال: یک فرم تماس ساده

در اینجا یک کامپوننت فرم تماس پایه آورده شده است:

```jsx // app/actions.js (اکشن سرور) 'use server' export async function submitContactForm(formData) { // شبیه‌سازی یک فراخوانی پایگاه داده یا درخواست API await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'همه فیلدها الزامی هستند.' }; } try { // با فراخوانی API یا عملیات پایگاه داده واقعی جایگزین کنید console.log('Form submitted:', { name, email, message }); return { success: true, message: 'فرم با موفقیت ارسال شد!' }; } catch (error) { console.error('Error submitting form:', error); return { success: false, message: 'ارسال فرم با شکست مواجه شد.' }; } } // app/components/ContactForm.jsx (کامپوننت کلاینت) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

نام:

ایمیل:

پیام:

</div>
      <SubmitButton />
    </form>
  );
}
```

<h3>توضیحات</h3>

<ul>
  <li><b>اکشن سرور (<code>app/actions.js</code>):</b> این فایل تابع <code>submitContactForm</code> را تعریف می‌کند که یک اکشن سرور است. این تابع یک درخواست API را با تأخیر ۲ ثانیه‌ای شبیه‌سازی می‌کند تا ماهیت ناهمزمان ارسال فرم را نشان دهد. همچنین اعتبارسنجی اولیه و مدیریت خطا را انجام می‌دهد.</li>
  <li><b>کامپوننت کلاینت (<code>app/components/ContactForm.jsx</code>):</b> این فایل کامپوننت <code>ContactForm</code> را تعریف می‌کند که یک کامپوننت کلاینت است. این کامپوننت هوک <code>experimental_useFormStatus</code> و اکشن <code>submitContactForm</code> را وارد می‌کند.</li>
  <li><b>استفاده از <code>useFormStatus</code>:</b> درون کامپوننت <code>SubmitButton</code>، هوک <code>useFormStatus</code> فراخوانی می‌شود. این هوک اطلاعاتی درباره وضعیت ارسال فرم فراهم می‌کند.</li>
  <li><b>خاصیت <code>pending</code>:</b> خاصیت <code>pending</code> که توسط <code>useFormStatus</code> بازگردانده می‌شود، نشان می‌دهد که آیا فرم در حال حاضر در حال ارسال است یا خیر. از این خاصیت برای غیرفعال کردن دکمه ارسال و نمایش پیام «در حال ارسال...» استفاده می‌شود.</li>
  <li><b>اتصال فرم:</b> پراپ <code>action</code> عنصر <code>form</code> به اکشن سرور <code>submitContactForm</code> متصل شده است. این به ری‌اکت می‌گوید که هنگام ارسال فرم، اکشن سرور را فراخوانی کند.</li>
</ul>

<h2>کاربرد پیشرفته و ملاحظات</h2>

<h3>مدیریت وضعیت‌های موفقیت و خطا</h3>

<p>در حالی که <code>experimental_useFormStatus</code> ردیابی وضعیت ارسال را ساده می‌کند، شما اغلب نیاز به مدیریت صریح وضعیت‌های موفقیت و خطا دارید. اکشن‌های سرور می‌توانند داده‌هایی را بازگردانند که موفقیت یا شکست را نشان می‌دهد، که سپس می‌توانید از آن برای به‌روزرسانی رابط کاربری استفاده کنید.</p>

```jsx
// app/components/ContactForm.jsx (اصلاح شده)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'در حال ارسال...' : 'ارسال'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">نام:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">ایمیل:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">پیام:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>توضیحات:</b></p>

<ul>
  <li><b>وضعیت برای پیام‌ها:</b> یک متغیر وضعیت به نام <code>message</code> برای ذخیره نتیجه بازگشتی از اکشن سرور معرفی شده است.</li>
  <li><b>مدیریت نتیجه:</b> پس از ارسال فرم، تابع <code>handleSubmit</code> وضعیت <code>message</code> را با نتیجه دریافتی از اکشن سرور به‌روز می‌کند.</li>
  <li><b>نمایش پیام‌ها:</b> کامپوننت پیام را بر اساس خاصیت <code>success</code> نتیجه نمایش می‌دهد و کلاس‌های CSS متفاوتی برای وضعیت‌های موفقیت و خطا اعمال می‌کند.</li>
</ul>

<h3>بهبود تدریجی (Progressive Enhancement)</h3>

<p><code>experimental_useFormStatus</code> در سناریوهای بهبود تدریجی به خوبی می‌درخشد. با بهبود تدریجی یک فرم HTML استاندارد با ری‌اکت، می‌توانید تجربه کاربری بهتری را فراهم کنید بدون اینکه در صورت از کار افتادن جاوااسکریپت، عملکرد اصلی را از دست بدهید.</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">نام:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">پیام:</label>
    <textarea id="message" name="message" required>

```

سپس می‌توانید آن را به صورت تدریجی با ری‌اکت و experimental_useFormStatus بهبود ببخشید.

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // اگر به حالت اولیه متکی نیستید، از null استفاده کنید return (

نام:

ایمیل:

پیام:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<p><b>توضیحات:</b></p>

<ul>
  <li><b>فرم HTML اولیه:</b> فایل <code>public/contact.html</code> حاوی یک فرم HTML استاندارد است که حتی بدون جاوااسکریپت نیز کار می‌کند.</li>
  <li><b>بهبود تدریجی:</b> کامپوننت <code>EnhancedContactForm</code> فرم HTML را به صورت تدریجی بهبود می‌بخشد. اگر جاوااسکریپت فعال باشد، ری‌اکت کنترل را به دست گرفته و تجربه کاربری غنی‌تری را ارائه می‌دهد.</li>
  <li><b>هوک <code>useFormState</code>:</b> از <code>useFormState</code> برای مدیریت وضعیت فرم و اتصال اکشن سرور به فرم استفاده می‌کند.</li>
	<li> <b><code>state</code>:</b> متغیر <code>state</code> حاصل از <code>useFormState</code> اکنون مقدار بازگشتی از اکشن سرور را در خود نگه می‌دارد که می‌توان آن را برای پیام‌های موفقیت یا خطا بررسی کرد.</li>
</ul>

<h3>ملاحظات بین‌المللی</h3>

<p>هنگام پیاده‌سازی فرم‌ها برای مخاطبان جهانی، چندین ملاحظه بین‌المللی مطرح می‌شود:</p>

<ul>
  <li><b>بومی‌سازی:</b> اطمینان حاصل کنید که برچسب‌ها، پیام‌ها و پیام‌های خطای فرم شما به زبان‌های مختلف بومی‌سازی شده‌اند. ابزارهایی مانند i18next می‌توانند به مدیریت ترجمه‌ها کمک کنند.</li>
  <li><b>فرمت‌های تاریخ و عدد:</b> فرمت‌های تاریخ و عدد را مطابق با منطقه کاربر مدیریت کنید. از کتابخانه‌هایی مانند <code>Intl</code> یا <code>moment.js</code> (برای فرمت‌دهی تاریخ، هرچند اکنون منسوخ در نظر گرفته می‌شود) برای فرمت‌دهی صحیح تاریخ و اعداد استفاده کنید.</li>
  <li><b>فرمت‌های آدرس:</b> کشورهای مختلف فرمت‌های آدرس متفاوتی دارند. استفاده از کتابخانه‌ای که از فرمت‌های آدرس چندگانه پشتیبانی می‌کند یا ایجاد فیلدهای فرم سفارشی بر اساس موقعیت کاربر را در نظر بگیرید.</li>
  <li><b>اعتبارسنجی شماره تلفن:</b> شماره تلفن‌ها را بر اساس استانداردهای بین‌المللی اعتبارسنجی کنید. کتابخانه‌هایی مانند <code>libphonenumber-js</code> می‌توانند در این زمینه کمک کنند.</li>
  <li><b>پشتیبانی از راست-به-چپ (RTL):</b> اطمینان حاصل کنید که طرح‌بندی فرم شما از زبان‌های راست-به-چپ مانند عربی یا عبری پشتیبانی می‌کند. از ویژگی‌های منطقی CSS (مانند <code>margin-inline-start</code> به جای <code>margin-left</code>) برای پشتیبانی بهتر از RTL استفاده کنید.</li>
  <li><b>دسترس‌پذیری:</b> از دستورالعمل‌های دسترس‌پذیری (WCAG) پیروی کنید تا اطمینان حاصل شود که فرم‌های شما برای افراد دارای معلولیت، صرف‌نظر از موقعیت مکانی آن‌ها، قابل استفاده هستند.</li>
</ul>

<p><b>مثال: برچسب‌های فرم بومی‌سازی شده</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/fa.json
{
  "contactForm": {
    "nameLabel": "نام",
    "emailLabel": "ایمیل",
    "messageLabel": "پیام",
    "submitButton": "ارسال",
    "successMessage": "فرم با موفقیت ارسال شد!",
    "errorMessage": "ارسال فرم با شکست مواجه شد."
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>توضیحات:</b></p>

<ul>
  <li><b>فایل‌های ترجمه:</b> این مثال از <code>react-i18next</code> برای مدیریت ترجمه‌ها استفاده می‌کند. فایل‌های JSON جداگانه حاوی ترجمه‌ها برای زبان‌های مختلف هستند.</li>
  <li><b>هوک <code>useTranslation</code>:</b> هوک <code>useTranslation</code> دسترسی به تابع ترجمه (<code>t</code>) را فراهم می‌کند که برای بازیابی رشته‌های بومی‌سازی شده استفاده می‌شود.</li>
  <li><b>برچسب‌های بومی‌سازی شده:</b> برچسب‌های فرم و متن دکمه با استفاده از تابع <code>t</code> بازیابی می‌شوند، که تضمین می‌کند آن‌ها به زبان ترجیحی کاربر نمایش داده شوند.</li>
</ul>

<h3>ملاحظات دسترس‌پذیری</h3>

<p>اطمینان از اینکه فرم‌های شما برای همه کاربران، از جمله افراد دارای معلولیت، قابل دسترس هستند، بسیار مهم است. در اینجا برخی از ملاحظات کلیدی دسترس‌پذیری آورده شده است:</p>

<ul>
  <li><b>HTML معنایی:</b> از عناصر HTML معنایی مانند <code><label></code>، <code><input></code>، <code><textarea></code> و <code><button></code> به درستی استفاده کنید.</li>
  <li><b>برچسب‌ها:</b> برچسب‌ها را با استفاده از ویژگی <code>for</code> در <code><label></code> و ویژگی <code>id</code> در کنترل فرم، به کنترل‌های فرم مرتبط کنید.</li>
  <li><b>ویژگی‌های ARIA:</b> از ویژگی‌های ARIA برای ارائه اطلاعات اضافی به فناوری‌های کمکی استفاده کنید. به عنوان مثال، از <code>aria-describedby</code> برای پیوند دادن یک کنترل فرم به یک توضیح استفاده کنید.</li>
  <li><b>مدیریت خطا:</b> خطاها را به وضوح نشان دهید و پیام‌های خطای مفیدی ارائه دهید. از ویژگی‌های ARIA مانند <code>aria-invalid</code> برای نشان دادن کنترل‌های فرم نامعتبر استفاده کنید.</li>
  <li><b>ناوبری با صفحه‌کلید:</b> اطمینان حاصل کنید که کاربران می‌توانند با استفاده از صفحه‌کلید در فرم حرکت کنند. در صورت لزوم از ویژگی <code>tabindex</code> برای کنترل ترتیب فوکوس استفاده کنید.</li>
  <li><b>کنتراست رنگ:</b> از کنتراست رنگ کافی بین متن و رنگ پس‌زمینه اطمینان حاصل کنید.</li>
  <li><b>ساختار فرم:</b> از ساختار فرم واضح و منسجم استفاده کنید. کنترل‌های فرم مرتبط را با استفاده از عناصر <code><fieldset></code> و <code><legend></code> گروه‌بندی کنید.</li>
</ul>

<p><b>مثال: مدیریت خطای قابل دسترس</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'در حال ارسال...' : 'ارسال'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // اعتبارسنجی پایه سمت کلاینت
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'نام الزامی است.';
    }
    if (!formData.get('email')) {
      newErrors.email = 'ایمیل الزامی است.';
    }
    if (!formData.get('message')) {
      newErrors.message = 'پیام الزامی است.';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // پاک کردن خطاهای قبلی
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">نام:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">ایمیل:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">پیام:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<p><b>توضیحات:</b></p>

<ul>
  <li><b>وضعیت خطا:</b> این کامپوننت یک وضعیت <code>errors</code> برای ردیابی خطاهای اعتبارسنجی نگهداری می‌کند.</li>
  <li><b>اعتبارسنجی سمت کلاینت:</b> تابع <code>handleSubmit</code> قبل از ارسال فرم، اعتبارسنجی پایه سمت کلاینت را انجام می‌دهد.</li>
  <li><b>ویژگی‌های ARIA:</b> ویژگی <code>aria-invalid</code> در صورت وجود خطا برای یک کنترل فرم خاص، به <code>true</code> تنظیم می‌شود. ویژگی <code>aria-describedby</code> کنترل فرم را به پیام خطا پیوند می‌دهد.</li>
  <li><b>پیام‌های خطا:</b> پیام‌های خطا در کنار کنترل‌های فرم مربوطه نمایش داده می‌شوند.</li>
</ul>

<h2>چالش‌ها و محدودیت‌های احتمالی</h2>

<ul>
  <li><b>وضعیت تجربی:</b> از آنجایی که <code>experimental_useFormStatus</code> یک API تجربی است، ممکن است در نسخه‌های آینده ری‌اکت تغییر کند یا حذف شود. ضروری است که با مستندات ری‌اکت به‌روز بمانید و در صورت لزوم آماده تطبیق کد خود باشید.</li>
  <li><b>محدوده محدود:</b> این هوک عمدتاً بر ردیابی وضعیت ارسال تمرکز دارد و ویژگی‌های جامع مدیریت فرم مانند اعتبارسنجی یا مدیریت داده را ارائه نمی‌دهد. ممکن است هنوز نیاز به پیاده‌سازی منطق اضافی برای این جنبه‌ها داشته باشید.</li>
  <li><b>وابستگی به اکشن سرور:</b> این هوک برای کار با اکشن‌های سرور طراحی شده است، که ممکن است برای همه موارد استفاده مناسب نباشد. اگر از اکشن‌های سرور استفاده نمی‌کنید، ممکن است نیاز به یافتن راه‌حل‌های جایگزین برای مدیریت وضعیت فرم داشته باشید.</li>
</ul>

<h2>نتیجه‌گیری</h2>

<p>هوک <code>experimental_useFormStatus</code> بهبود قابل توجهی در مدیریت وضعیت‌های ارسال فرم در ری‌اکت ارائه می‌دهد، به ویژه هنگام کار با اکشن‌های سرور و بهبود تدریجی. با ساده‌سازی مدیریت وضعیت و ارائه یک API واضح و مختصر، هم تجربه توسعه‌دهنده و هم تجربه کاربری را بهبود می‌بخشد. با این حال، با توجه به ماهیت تجربی آن، بسیار مهم است که از به‌روزرسانی‌ها و تغییرات احتمالی در نسخه‌های آینده ری‌اکت مطلع باشید. با درک مزایا، محدودیت‌ها و بهترین شیوه‌های آن، می‌توانید به طور مؤثر از <code>experimental_useFormStatus</code> برای ساخت فرم‌های قوی‌تر و کاربرپسندتر در برنامه‌های ری‌اکت خود استفاده کنید. به یاد داشته باشید که بهترین شیوه‌های بین‌المللی‌سازی و دسترس‌پذیری را برای ایجاد فرم‌های فراگیر برای مخاطبان جهانی در نظر بگیرید.</p></div><template id="P:4"></template></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><div hidden id="S:4"><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">وضعیت فرم</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">فرم‌های ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">API تجربی</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">هوک‌های ری‌اکت</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ارسال فرم</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">فرم‌های ناهمزمان</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">بهبود تدریجی</span></div></footer></div><script>$RS("S:4","P:4")</script><script>$RC("B:1","S:1")</script></body></html>

پیاده‌سازی experimental_useFormStatus در ری‌اکت: مدیریت پیشرفته وضعیت فرم

هوک experimental_useFormStatus چیست؟

پیاده‌سازی پایه

پیش‌نیازها

مثال: یک فرم تماس ساده

هوک `experimental_useFormStatus` چیست؟