مدیریت داده‌های ورودی با state

مقدمه

در درس قبل، با الگوی کامپوننت کنترل‌شده برای یک فیلد ورودی واحد آشنا شدیم. اما بیشتر فرم‌های دنیای واقعی، چندین فیلد ورودی دارند (مانند نام، ایمیل، رمز عبور و غیره). اگر بخواهیم برای هر فیلد، یک متغیر state و یک تابع event handler جداگانه بنویسیم، کد ما به سرعت تکراری و مدیریت آن دشوار خواهد شد.

در این درس، الگوهای بهتری را برای مدیریت state فرم‌هایی با چندین فیلد ورودی یاد خواهیم گرفت.

استفاده از یک شیء state واحد

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

یک Handler عمومی برای تمام ورودی‌ها

برای اینکه بتوانیم با یک تابع event handler واحد، تمام فیلدها را به‌روزرسانی کنیم، از اتریبیوت name در هر عنصر <input> استفاده می‌کنیم. ما می‌توانیم این نام را از شیء event خوانده و از آن برای به‌روزرسانی کلید مربوطه در شیء state خود استفاده کنیم.

JAVASCRIPT (React)

import { useState } from 'react';

function SignupForm() {
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
  });

  function handleChange(event) {
    const { name, value } = event.target;
    setFormData(prevFormData => {
      return {
        ...prevFormData,
        [name]: value
      };
    });
  }

  return (
    <form>
      <input
        type="text"
        placeholder="First Name"
        onChange={handleChange}
        name="firstName"
        value={formData.firstName}
      />
      <input
        type="text"
        placeholder="Last Name"
        onChange={handleChange}
        name="lastName"
        value={formData.lastName}
      />
      <input
        type="email"
        placeholder="Email"
        onChange={handleChange}
        name="email"
        value={formData.email}
      />
    </form>
  );
}

بیایید این کد را به دقت بررسی کنیم. ما یک state به نام formData داریم که یک شیء با سه کلید است. هر عنصر <input> یک اتریبیوت name دارد که دقیقاً با یکی از این کلیدها مطابقت دارد.

تابع handleChange اکنون یک تابع عمومی است. با هر تغییر در هر کدام از ورودی‌ها، این تابع اجرا می‌شود. event.target به ما عنصر DOM مربوط به آن ورودی را می‌دهد. ما name (مثلاً "firstName") و value (مقدار تایپ شده) را از آن استخراج می‌کنیم.

سپس، ما از یک تابع به‌روزرسان در setFormData استفاده می‌کنیم. این تابع، state قبلی (prevFormData) را گرفته و یک شیء جدید را برمی‌گرداند. ما با استفاده از سینتکس spread (...prevFormData)، تمام مقادیر قبلی را در شیء جدید کپی کرده و سپس با استفاده از سینتکس «نام پراپرتی محاسباتی» (computed property names) یعنی [name]: value تنها کلیدی را که تغییر کرده است، با مقدار جدید بازنویسی می‌کنیم. این الگو، اصل «تغییرناپذیری» را رعایت کرده و بسیار مقیاس‌پذیر است.

در این درس، با یک الگوی قدرتمند و استاندارد برای مدیریت فرم‌هایی با چندین فیلد ورودی آشنا شدیم. با استفاده از یک شیء state واحد و یک event handler عمومی، توانستیم از تکرار کد جلوگیری کرده و یک ساختار تمیز و مقیاس‌پذیر برای فرم‌های خود ایجاد کنیم.

اکنون که می‌توانیم داده‌ها را از کاربر دریافت و در state مدیریت کنیم، در درس بعدی به «اعتبارسنجی ساده و نمایش خطا» خواهیم پرداخت و یاد می‌گیریم که چگونه از صحت داده‌های ورودی اطمینان حاصل کرده و در صورت وجود خطا، بازخورد مناسبی به کاربر نمایش دهیم.