آشنایی با فرم‌ها در React

در React، یکی از مهم‌ترین و رایج‌ترین وظایف، کار با فرم‌ها و مدیریت داده‌های ورودی کاربران است. فرم‌ها به ما این امکان را می‌دهند تا اطلاعاتی را از کاربران دریافت کنیم و معمولاً نیاز داریم این اطلاعات را جهت اعمال خاصی ذخیره و یا پردازش کنیم. در این مقاله به بررسی عملی و ملموس فرم‌ها در React خواهیم پرداخت و شیوه‌های کارآمد مدیریت آن‌ها را بیان خواهیم کرد.

فرم‌ها در React به دلیل خصوصیت یکطرفه‌ای که وجود دارد کمی متفاوت با HTML مرسوم عمل می‌کنند. در فرم‌های react، به جای استفاده مستقیم از DOM برای خواندن و نوشتن اطلاعات، عموماً از state استفاده می‌شود. این مسئله به ما امکان می‌دهد که به‌راحتی تغییرات را دنبال کنیم و کاربردهای پیچیده‌تری را نیز پیاده‌سازی کنیم.

برای شروع کار با فرم در React، اولین قدم استفاده از state در کامپوننت فرم است. ما معمولا از useState برای ایجاد و مدیریت این state استفاده می‌کنیم. این کار به ما امکان می‌دهد که وضعیت فعلی فرم و وضعیت‌های آتی را کنترل کنیم. به عنوان مثال، می‌توانیم از state برای ذخیره داده‌های ورودی کاربر استفاده کنیم و بعداً از آن‌ها برای انجام عملیات‌هایگذاری استفاده کنیم.

همچنین یادگیری نحوه مدیریت و بررسی اعتبار داده‌های ورودی کاربر (validation) بسیار مهم است. در مثال‌ها و توضیحات زیر، سعی می‌کنیم به این جنبه‌ها بپردازیم و نشان دهیم که چگونه می‌توان پایداری و کیفیت فرم‌ها را بهبود بخشید.

یک نمونه ساده فرم در React

در این مثال، ساخت یک فرم ساده با ورودی و دکمه ارسال را بررسی می‌کنیم:

import React, { useState } from 'react';

function SimpleForm() {
    const [inputValue, setInputValue] = useState('');
    
    const handleSubmit = (event) => {
        event.preventDefault();
        console.log('Submitted Value:', inputValue);
    };

    const handleInputChange = (event) => {
        setInputValue(event.target.value);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" value={inputValue} onChange={handleInputChange} />
            </label>
            <button type="submit">Submit</button>
        </form>
    );
}

export default SimpleForm;

توضیح قدم به قدم کد بالا

import React, { useState } from 'react';
این خط کد ابتدا React و سایر هوک‌ها (مانند useState) را وارد می‌کند که برای عملکرد کامپوننت لازم هستند.

const [inputValue, setInputValue] = useState('');
در اینجا، useState یک state جدید با مقدار اولیه خالی ایجاد کرده است که برای ذخیره مقدار ورودی کاربر استفاده می‌شود.

const handleSubmit = (event) => { ... }
این تابع جهت مدیریت رویداد submit فرم استفاده می‌شود، که جلوی رفتار پیش‌فرض فرم (رفرش صفحه) را می‌گیرد و مقدار ورودی را در کنسول لاگ می‌کند.

const handleInputChange = (event) => { ... }
این تابع مسئول بروزرسانی state با مقدار فعلی ورودی کاربر است.

<form onSubmit={handleSubmit}>...
این خطوط برای ساختار فرم HTML استفاده می‌شود. تابع handleSubmit زمانی فراخوانی می‌شود که فرم ارسال (submit) شود.

<input type="text" ... />
این ورودی متنی برای گرفتن ورودی از کاربر است که براساس تغییرات، state را با مقدار جدید بروزرسانی می‌کند.

<button type="submit">Submit</button>
دکمه‌ای برای ارسال اطلاعات فرم است. کلیک بر روی این دکمه تابع handleSubmit را فراخوانی می‌کند.