چند ورودی در فرم (Multiple Inputs)

گاهی فرم ما فقط یک ورودی نیست؛ چند ورودی در فرم داریم؛ مثل نام، نام خانوادگی، شماره دانش آموزی. در React بهتر است همه این ورودی ها را مرتب و کنترل شده مدیریت کنیم تا فرم مثل یک بازی منظم رفتار کند.

مدیریت چند ورودی در فرم با یک state

در فرم های React، هر ورودی یک input کنترل شده است؛ یعنی مقدار input را state نگه می دارد. برای چند ورودی در فرم دو راه داریم: چند useState جدا یا یک useState که یک شیء از همه فیلدها نگه دارد.

روش معمول تر برای فرم های جدی، استفاده از یک state شیء است. کافی است برای هر input یک name یکتا بگذاری و مقدارش را بر اساس همان name داخل شیء ذخیره کنی.

اگر مفهوم فرم کنترل شده را یادت رفته، پیشنهاد می کنم یک نگاه به صفحه فرم ها در React بیندازی تا روند کلی کار فرم ها برایت تازه شود.

نمونه کامل چند ورودی در فرم

در این مثال، فرم دو ورودی دارد: firstname و lastname. هر دو در یک state به نام inputs نگه داشته می شوند و با یک تابع handleChange مدیریت می شوند.

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

function MyForm() {
  const [inputs, setInputs] = useState({});

  function handleChange(e) {
    const name = e.target.name;
    const value = e.target.value;
    setInputs((values) => ({
      ...values,
      [name]: value
    }));
  }

  return (
    <form>
      <label>
        First name:
        <input
          type="text"
          name="firstname"
          value={inputs.firstname}
          onChange={handleChange}
        />
      </label>
      <label>
        Last name:
        <input
          type="text"
          name="lastname"
          value={inputs.lastname}
          onChange={handleChange}
        />
      </label>
      <p>
        Current values: {inputs.firstname} {inputs.lastname}
      </p>
    </form>
  );
}

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

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

در اینجا هر input با name خودش شناخته می شود. تابع handleChange تشخیص می دهد کدام فیلد عوض شده و فقط همان کلید را در شیء inputs به روز می کند.

ساخت state شیء برای چند ورودی در فرم

وقتی چند ورودی در فرم داریم، به جای یک رشته خالی، state را با یک شیء شروع می کنیم. اگر مقدار اولیه نداریم، از شیء خالی استفاده می کنیم.

const [inputs, setInputs] = useState({});

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

اینجا inputs یک شیء است که بعداً کلیدهایی مثل firstname و lastname روی آن اضافه می شود. setInputs هم همان تابعی است که این شیء را تغییر می دهد.

تابع handleChange و به روزرسانی چند ورودی

در رویداد onChange هر input، تابع handleChange صدا زده می شود. این تابع از روی e.target.name می فهمد کدام فیلد بوده و از e.target.value مقدار جدید را می گیرد.

function handleChange(e) {
  const name = e.target.name;
  const value = e.target.value;
  setInputs((values) => ({
    ...values,
    [name]: value
  }));
}

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

عملگر ... یا Spread Operator یعنی «همه کلیدهای قبلی را نگه دار». سپس با [name]: value همان فیلد تغییر کرده را روی شیء inputs به روز می کنیم.

بایند کردن ورودی ها به شیء inputs

برای اینکه ورودی ها واقعاً کنترل شده باشند، value آن ها را از شیء inputs می خوانیم و onChange را به handleChange وصل می کنیم.

<input
  type="text"
  name="firstname"
  value={inputs.firstname}
  onChange={handleChange}
/>
<input
  type="text"
  name="lastname"
  value={inputs.lastname}
  onChange={handleChange}
/>
<p>
  Current values: {inputs.firstname} {inputs.lastname}
</p>

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

الان هر تغییری در input ها مستقیم وارد state می شود و React همیشه آخرین مقدار هر فیلد را می داند؛ مثل لیست حضور و غیاب که همیشه به روز است.

مقداردهی اولیه برای چند ورودی در فرم

گاهی می خواهی فرم با داده های اولیه پر شود؛ مثلاً فرم ویرایش پروفایل. در این حالت به جای شیء خالی، شیء inputs را با کلیدها و مقدارهای پیش فرض می سازیم.

function MyForm() {
  const [inputs, setInputs] = useState({
    firstname: 'John',
    lastname: 'Doe'
  });

  ...
}

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

با این کار، وقتی فرم برای اولین بار رندر می شود، مقدار input ها همان firstname و lastname پیش فرض است. بقیه منطق handleChange دقیقاً مثل قبل کار می کند.

اگر فرم تو فیلد Select یا Textarea هم دارد، می توانی از الگوهای فیلد Select در React و فیلد Textarea در React استفاده کنی و آن ها را هم داخل همین شیء inputs مدیریت کنی.

هر وقت خواستی دوباره مبحث چند ورودی در فرم را مرور کنی، به همین صفحه برگرد؛ اینجا الگوی اصلی فرم های چندفیلدی را داری.

جمع بندی سریع چند ورودی در فرم

• برای چند ورودی در فرم از یک useState شیء استفاده کن.
• هر input باید name یکتای خودش را داشته باشد.
• تابع handleChange با name تشخیص می دهد کدام فیلد تغییر کرده است.
• با Spread Operator بقیه فیلدها را دست نخورده نگه دار.
• برای مقدار اولیه، همان کلیدها را در شیء useState تنظیم کن.