فرم ها (Forms)

فرم ها در React یا همان React Forms یعنی جایی که کاربر چیزی تایپ یا انتخاب می کند؛ مثلاً فرم نام نویسی مدرسه یا فرم ورود به بازی.

فرم ها در React چیست؟

در HTML معمولی هم فرم داریم، اما فرم ها در React کمی متفاوت هستند. در HTML، خود تگ ها مقدارشان را نگه می دارند؛ ولی در React دوست داریم همه چیز زیر نظر state (وضعیت کامپوننت) باشد.

وقتی فرم ها در React را با state مدیریت می کنی، کنترل کامل دست خودت است. می توانی قبل از ارسال، مقدارها را چک کنی، تمیز کنی یا حتی به کاربر پیام بدهی.

اضافه کردن فرم ساده در React

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

در مثال زیر یک فرم ساده داریم که فقط یک ورودی نام دارد. این فرم هنوز «کنترل شده» نیست و مثل فرم HTML معمولی کار می کند.

function MyForm() {
  return (
    <form>
      <label>
        Enter your name:
        <input type="text" />
      </label>
    </form>
  );
}

createRoot(document.getElementById("root")).render(
  <MyForm />
);

مشاهده در ادیتور

این فرم ارسال می شود و صفحه رفرش می شود؛ مثل HTML ساده. اما معمولاً در فرم ها در React نمی خواهیم صفحه رفرش شود. می خواهیم خودمان داده ها را بگیریم و مدیریت کنیم.

تفاوت فرم های HTML و فرم های React

در HTML معمولی، تگ های فرم مثل <input> و <textarea> مقدارشان را در DOM نگه می دارند. DOM همان درخت عناصر صفحه است.

اما در فرم ها در React، مقدار این ورودی ها داخل state کامپوننت ذخیره می شود. state (استیت) یعنی جایی که React وضعیت فعلی کامپوننت را نگه می دارد.

بنابراین در React، برای تغییر مقدار ورودی، باید state را با تابع setState قدیمی یا امروز با useState آپدیت کنیم.

فرم هایی که مقدارشان از state می آید، «کامپوننت کنترل شده (Controlled Component)» نام دارند. چون React همه چیز را کنترل می کند.

فرم های کنترل شده (Controlled Components)

در فرم کنترل شده، مقدار ورودی ها از state می آید و هر تغییری در این ورودی ها، با یک event handler (تابع واکنش به رویداد) state را عوض می کند.

برای این کار از هوک useState کمک می گیریم. هوک ابزاری در React است که به کامپوننت تابعی قابلیت هایی مثل state می دهد.

import { useState } from 'react';
import { createRoot } from 'react-dom/client';

function MyForm() {
  const [name, setName] = useState("");

  function handleChange(e) {
    setName(e.target.value);
  }

  return (
    <form>
      <label>
        Enter your name:
        <input
          type="text"
          value={name}
          onChange={handleChange}
        />
      </label>
      <p>
        Current value: {name}
      </p>
    </form>
  );
}

createRoot(document.getElementById("root")).render(
  <MyForm />
);

مشاهده در ادیتور

اینجا مقدار input همیشه از state می آید. وقتی کاربر تایپ می کند، رویداد onChange صدا زده می شود، state عوض می شود و فرم دوباره با مقدار جدید رندر می شود.

نکته: برای یادگیری عمیق تر هوک ها، می توانی بخش React Hooks در منبع اصلی را ببینی.

گام به گام ساخت یک فرم کنترل شده

حالا قدم به قدم همین مثال را باز می کنیم تا بهتر جا بیفتد.

1. اول هوک useState را از React وارد می کنیم:

import { useState } from 'react';

مشاهده در ادیتور

2. بعد یک state برای نگه داشتن مقدار input تعریف می کنیم:

const [name, setName] = useState("");

مشاهده در ادیتور

3. بعد یک تابع برای واکنش به تغییر ورودی می سازیم. این تابع event را می گیرد و state را به مقدار جدید input تبدیل می کند.

function handleChange(e) {
  setName(e.target.value);
}

مشاهده در ادیتور

4. حالا input را به state وصل می کنیم. با پراپس value مقدار input را از state می گیریم و با onChange هر تغییر را به تابع handleChange می دهیم.

<input
  type="text"
  value={name}
  onChange={handleChange}
/>

مشاهده در ادیتور

5. در نهایت، مقدار فعلی را نمایش می دهیم تا ببینیم فرم واقعاً کنترل شده است و با هر تغییر، state عوض می شود.

<p>
  Current value: {name}
</p>

مشاهده در ادیتور

مقدار اولیه در فرم ها

گاهی می خواهی فرم از قبل پر شده باشد؛ مثلاً نام کاربر لاگین شده را نشان بدهی. در فرم های کنترل شده، کافی است مقدار اولیه useState را تنظیم کنی.

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

function MyForm() {
  const [name, setName] = useState("John");

  // بقیه کد مثل قبل است
}

مشاهده در ادیتور

این روش برای فرم های ویرایش پروفایل، فرم تنظیمات و هرجایی که داده قبلی داریم بسیار کاربردی است. چون فرم ها در React مستقیماً به state وصل هستند، مقدار اولیه هم به سادگی از همان state می آید.

جمع بندی سریع فرم ها (Forms)

• فرم ها در React بهتر است کنترل شده باشند و با state مدیریت شوند.
• در فرم های کنترل شده، مقدار input همیشه از state می آید.
• با useState می توانی مقدار فعلی و مقدار اولیه را تنظیم کنی.
• event handler مثل onChange مسئول به روزرسانی state است.
• برای مرور دوباره، صفحه فرم ها در React بهترین نقطه شروع است.