تسلط بر مدیریت فرم با قلاب های سفارشی در React

Summarize this content to 400 words in Persian Lang
مدیریت فرم ها در React می تواند چالش برانگیز باشد، به خصوص که فرم ها در پیچیدگی رشد می کنند. قلاب‌های سفارشی راه‌حلی زیبا برای مدیریت حالت فرم، اعتبارسنجی و منطق ارسال ارائه می‌کنند و کد شما را پاک‌تر و قابل نگهداری‌تر می‌کنند. در این پست وبلاگ، نحوه ایجاد قلاب های سفارشی برای مدیریت فرم در React با استفاده از TypeScript را بررسی خواهیم کرد.

فهرست مطالب

مقدمه ای بر مدیریت فرم در React
ایجاد یک قلاب useForm پایه با TypeScript
اضافه کردن منطق اعتبارسنجی
مدیریت ارسال فرم
مدیریت بازنشانی فرم
ادغام با کتابخانه های خارجی
تکنیک های پیشرفته پردازش فرم
بهترین روش ها برای قلاب های جابجایی فرم
مثال: ساخت یک فرم کامل
نتیجه

1. مقدمه ای بر Form Handling در React

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

2. ایجاد یک UseForm Hook پایه

بیایید با ایجاد یک قلاب useForm ساده برای مدیریت حالت فرم شروع کنیم.

import { useState } from ‘react’;

type FormValues = {
[key: string]: any;
};

function useForm(initialValues: T) {
const [values, setValues] = useState(initialValues);

const handleChange = (event: React.ChangeEvent) => {
const { name, value } = event.target;
setValues({
…values,
[name]: value,
});
};

return {
values,
handleChange,
};
}

export default useForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این قلاب مقادیر فرم را مقداردهی اولیه می کند و یک تابع handleChange برای به روز رسانی حالت ارائه می دهد.

3. اضافه کردن منطق اعتبار سنجی

سپس، بیایید منطق اعتبارسنجی را به قلاب useForm خود اضافه کنیم. ما یک تابع اعتبار سنجی را به عنوان پارامتر می پذیریم و خطاهای اعتبار سنجی را مدیریت می کنیم.

import { useState } from ‘react’;

type FormValues = {
[key: string]: any;
};

type Errors = {
[K in keyof T]?: string;
};

function useForm(
initialValues: T,
validate: (name: keyof T, value: T[keyof T]) => string | undefined
) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState>({});

const handleChange = (event: React.ChangeEvent) => {
const { name, value } = event.target;
setValues({
…values,
[name]: value,
});

if (validate) {
setErrors({
…errors,
[name]: validate(name as keyof T, value),
});
}
};

return {
values,
errors,
handleChange,
};
}

export default useForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این قلاب اکنون خطاها را ردیابی می کند و آنها را بر اساس منطق اعتبار سنجی ارائه شده به روز می کند.

4. مدیریت ارسال فرم

اکنون، یک تابع handleSubmit برای رسیدگی به ارسال فرم اضافه می کنیم.

import { useState } from ‘react’;

type FormValues = {
[key: string]: any;
};

type Errors = {
[K in keyof T]?: string;
};

function useForm(
initialValues: T,
validate: (name: keyof T, value: T[keyof T]) => string | undefined,
onSubmit: (values: T) => void
) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState>({});

const handleChange = (event: React.ChangeEvent) => {
const { name, value } = event.target;
setValues({
…values,
[name]: value,
});

if (validate) {
setErrors({
…errors,
[name]: validate(name as keyof T, value),
});
}
};

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const validationErrors: Errors = {};
for (const key in values) {
const error = validate(key as keyof T, values[key]);
if (error) {
validationErrors[key as keyof T] = error;
}
}
setErrors(validationErrors);

if (Object.keys(validationErrors).length === 0) {
onSubmit(values);
}
};

return {
values,
errors,
handleChange,
handleSubmit,
};
}

export default useForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

تابع handleSubmit از ارسال فرم پیش‌فرض جلوگیری می‌کند، تمام فیلدها را تأیید می‌کند و در صورت عدم وجود خطا، تابع onSubmit را فراخوانی می‌کند.

5. بازنشانی فرم

همچنین می توانیم یک تابع resetForm اضافه کنیم تا فرم را به حالت اولیه بازگردانیم.

import { useState } from ‘react’;

type FormValues = {
[key: string]: any;
};

type Errors = {
[K in keyof T]?: string;
};

function useForm(
initialValues: T,
validate: (name: keyof T, value: T[keyof T]) => string | undefined,
onSubmit: (values: T) => void
) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState>({});

const handleChange = (event: React.ChangeEvent) => {
const { name, value } = event.target;
setValues({
…values,
[name]: value,
});

if (validate) {
setErrors({
…errors,
[name]: validate(name as keyof T, value),
});
}
};

const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const validationErrors: Errors = {};
for (const key in values) {
const error = validate(key as keyof T, values[key]);
if (error) {
validationErrors[key as keyof T] = error;
}
}
setErrors(validationErrors);

if (Object.keys(validationErrors).length === 0) {
onSubmit(values);
}
};

const resetForm = () => {
setValues(initialValues);
setErrors({});
};

return {
values,
errors,
handleChange,
handleSubmit,
resetForm,
};
}

export default useForm;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

6. یکپارچه سازی با کتابخانه های خارجی

قلاب سفارشی ما می تواند به راحتی با کتابخانه های خارجی مانند Yup برای اعتبار سنجی ادغام شود.

import * as Yup from ‘yup’;

const validationSchema = Yup.object().shape({
username: Yup.string().required(‘Username is required’),
email: Yup.string().email(‘Invalid email address’).required(‘Email is required’),
});

function validate(name: string, value: any) {
try {
validationSchema.validateSyncAt(name, { [name]: value });
return ”;
} catch (error) {
return error.message;
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

7. تکنیک های مدیریت فرم پیشرفته

قلاب های سفارشی همچنین می توانند سناریوهای پیچیده تری مانند فرم های پویا، فیلدهای وابسته و فرم های چند مرحله ای را مدیریت کنند. این تکنیک‌های پیشرفته شامل مدیریت حالت و منطق پیچیده‌تر در قلاب‌های شماست.

8. بهترین روش ها برای قلاب های انتقال فرم

آن را ساده نگه دارید: با عملکرد اولیه شروع کنید و در صورت نیاز گسترش دهید.نگرانی های جداگانه: در صورت پیچیده شدن بیش از حد، اعتبارسنجی، ارسال و مدیریت حالت را در عملکردهای مجزا مدیریت کنید.قابلیت استفاده مجدد: مطمئن شوید که قلاب های سفارشی شما در اشکال مختلف قابل استفاده مجدد هستند.Type Safety: از TypeScript استفاده کنید تا مطمئن شوید که قلاب‌های سفارشی و اجزای فرم از نظر نوع ایمن هستند.تست: برای قلاب های سفارشی خود تست هایی بنویسید تا مطمئن شوید مطابق انتظار کار می کنند.

9. مثال: ساخت یک فرم کامل

در اینجا نحوه استفاده از هوک useForm سفارشی برای ساخت یک فرم کامل آورده شده است.

import React from ‘react’;
import useForm from ‘./useForm’;

const validate = (name: string, value: any) => {
if (!value) return `${name} is required`;
return ”;
};

const onSubmit = (values: { username: string; email: string }) => {
console.log(‘Form Submitted:’, values);
};

const App: React.FC = () => {
const { values, errors, handleChange, handleSubmit, resetForm } = useForm(
{ username: ”, email: ” },
validate,
onSubmit
);

return (

);
};

export default App;

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

10. نتیجه گیری

قلاب های سفارشی در React یک راه قدرتمند برای مدیریت حالت فرم، اعتبارسنجی و منطق ارسال ارائه می دهند. با کپسوله کردن این منطق در قلاب ها، می توانید اجزای فرم قابل استفاده مجدد و قابل نگهداری ایجاد کنید. با اصول اولیه شروع کنید و به تدریج عملکردهای بیشتری را در صورت نیاز اضافه کنید.

import { useState } from 'react';

type FormValues = {
    [key: string]: any;
};

function useForm(initialValues: T) {
    const [values, setValues] = useState(initialValues);

    const handleChange = (event: React.ChangeEvent) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value,
        });
    };

    return {
        values,
        handleChange,
    };
}

export default useForm;

import { useState } from 'react';

type FormValues = {
    [key: string]: any;
};

type Errors = {
    [K in keyof T]?: string;
};

function useForm(
    initialValues: T,
    validate: (name: keyof T, value: T[keyof T]) => string | undefined
) {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState>({});

    const handleChange = (event: React.ChangeEvent) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value,
        });

        if (validate) {
            setErrors({
                ...errors,
                [name]: validate(name as keyof T, value),
            });
        }
    };

    return {
        values,
        errors,
        handleChange,
    };
}

export default useForm;

import { useState } from 'react';

type FormValues = {
    [key: string]: any;
};

type Errors = {
    [K in keyof T]?: string;
};

function useForm(
    initialValues: T,
    validate: (name: keyof T, value: T[keyof T]) => string | undefined,
    onSubmit: (values: T) => void
) {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState>({});

    const handleChange = (event: React.ChangeEvent) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value,
        });

        if (validate) {
            setErrors({
                ...errors,
                [name]: validate(name as keyof T, value),
            });
        }
    };

    const handleSubmit = (event: React.FormEvent) => {
        event.preventDefault();
        const validationErrors: Errors = {};
        for (const key in values) {
            const error = validate(key as keyof T, values[key]);
            if (error) {
                validationErrors[key as keyof T] = error;
            }
        }
        setErrors(validationErrors);

        if (Object.keys(validationErrors).length === 0) {
            onSubmit(values);
        }
    };

    return {
        values,
        errors,
        handleChange,
        handleSubmit,
    };
}

export default useForm;

import { useState } from 'react';

type FormValues = {
    [key: string]: any;
};

type Errors = {
    [K in keyof T]?: string;
};

function useForm(
    initialValues: T,
    validate: (name: keyof T, value: T[keyof T]) => string | undefined,
    onSubmit: (values: T) => void
) {
    const [values, setValues] = useState(initialValues);
    const [errors, setErrors] = useState>({});

    const handleChange = (event: React.ChangeEvent) => {
        const { name, value } = event.target;
        setValues({
            ...values,
            [name]: value,
        });

        if (validate) {
            setErrors({
                ...errors,
                [name]: validate(name as keyof T, value),
            });
        }
    };

    const handleSubmit = (event: React.FormEvent) => {
        event.preventDefault();
        const validationErrors: Errors = {};
        for (const key in values) {
            const error = validate(key as keyof T, values[key]);
            if (error) {
                validationErrors[key as keyof T] = error;
            }
        }
        setErrors(validationErrors);

        if (Object.keys(validationErrors).length === 0) {
            onSubmit(values);
        }
    };

    const resetForm = () => {
        setValues(initialValues);
        setErrors({});
    };

    return {
        values,
        errors,
        handleChange,
        handleSubmit,
        resetForm,
    };
}

export default useForm;

import * as Yup from 'yup';

const validationSchema = Yup.object().shape({
    username: Yup.string().required('Username is required'),
    email: Yup.string().email('Invalid email address').required('Email is required'),
});

function validate(name: string, value: any) {
    try {
        validationSchema.validateSyncAt(name, { [name]: value });
        return '';
    } catch (error) {
        return error.message;
    }
}

import React from 'react';
import useForm from './useForm';

const validate = (name: string, value: any) => {
    if (!value) return `${name} is required`;
    return '';
};

const onSubmit = (values: { username: string; email: string }) => {
    console.log('Form Submitted:', values);
};

const App: React.FC = () => {
    const { values, errors, handleChange, handleSubmit, resetForm } = useForm(
        { username: '', email: '' },
        validate,
        onSubmit
    );

    return (
        
    );
};

export default App;