فرم‌ها ری‌ اکت

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

در این مثال، تنها یک ورودی برای نام داریم. مقدار این ورودی در state ذخیره می‌شود و هنگام ارسال فرم، از بارگذاری مجدد صفحه جلوگیری شده و مقدار واردشده نمایش داده می‌شود.

import React, { useState } from 'react';

function NameForm() {
  const [name, setName] = useState(''); // نگهداری مقدار نام

  const handleSubmit = e => {
    e.preventDefault();                  // جلوگیری از رفرش صفحه
    alert(`نام شما: ${name}`);           // نمایش مقدار
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        نام:
        <input
          type="text"
          value={name}
          onChange={e => setName(e.target.value)}
        />
      </label>
      <button type="submit">ثبت</button>
    </form>
  );
}

export default NameForm;

• استیت برای ذخیره داده: متغیر name مقدار ورودی کاربر را نگه می‌دارد و با تابع setName به‌روزرسانی می‌شود.
• رویداد onChange: با هر بار تایپ کاربر، مقدار جدید در state ذخیره می‌شود. این قابلیت در موقعیت‌هایی مانند پیش‌نمایش زنده یا جستجوی در لحظه بسیار کاربردی است.
• جلوگیری از رفرش صفحه: با استفاده از event.preventDefault()، پس از ارسال فرم، صفحه رفرش نمی‌شود و تجربه کاربری بهتری ایجاد خواهد شد.

در HTML معمولی، مرورگر به‌صورت خودکار ورودی‌ها را مدیریت می‌کند. اما در ری‌اکت، این مدیریت توسط state انجام می‌شود. این روش را کامپوننت کنترل‌شده یا Controlled Component می‌نامند.

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

• می‌توانیم ورودی‌ها را اعتبارسنجی (validate) کنیم.
• تغییر یا ریست‌کردن مقدار ورودی‌ها به‌راحتی امکان‌پذیر است.
• فرم‌ها را می‌توان با سایر بخش‌های برنامه هماهنگ کرد (مثلاً برای ارسال به سرور یا ذخیره در state مرکزی).

function Login() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    if (password.length < 6) {
      alert("Password Must Be At Least 6 Characters!");
    } else {
      alert("Welcome " + username + "!");
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Username"
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Password"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

در این مثال، با استفاده از وضعیت:

• طول رمز عبور را چک کرده‌ایم (اعتبارسنجی)
• پیام مناسب به کاربر نمایش داده می‌شود (بازخورد).

import React, { useState } from "react";

function UserForm() {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert("name: " + name + "، age: " + age);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Name"
      />
      <input
        type="number"
        value={age}
        onChange={(e) => setAge(e.target.value)}
        placeholder="Age"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

• مدیریت چند ورودی: برای هر فیلد یک state جداگانه در نظر گرفته شده است. این رویکرد در ساخت فرم‌های پیچیده مانند ثبت‌نام یا پروفایل‌نویسی بسیار کاربردی است.
• نوع ورودی مناسب: استفاده از type="number" برای فیلد سن، از ورود داده‌های غیرعددی جلوگیری می‌کند و دقت فرم را افزایش می‌دهد.
• راهنمایی کاربر: با استفاده از placeholder، به‌صورت واضح مشخص شده که هر فیلد چه نوع اطلاعاتی را باید دریافت کند. این ویژگی یکی از اصول مهم طراحی تجربه کاربری (UX) است.

import React, { useState } from "react";

function ResetForm() {
  const [text, setText] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    alert("text: " + text);
    setText(""); // خالی کردن فرم
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Write Something"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

• ریست‌کردن فرم: پس از ارسال اطلاعات، مقدار state با استفاده از setText("") بازنشانی می‌شود. این ویژگی در فرم‌هایی مانند نظرسنجی یا چت بسیار مفید است.
• کنترل دستی: از آنجا که مقادیر ورودی با state مدیریت می‌شوند، می‌توانیم در هر لحظه به صورت دلخواه آن‌ها را تغییر داده یا بازنشانی کنیم. این سطح از کنترل در فرم‌های HTML معمولی به‌راحتی در دسترس نیست.