ایجاد و کار با فرم ها در ری اکت (React JS)

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

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

• با استفاده از کدهای HTML و useState
• با استفاده از کامپاننت هایی مانند Formik

فرق بین فرم های HTML و فرم های React

در فرم HTML مقادیر input، textarea و… معمولا وضعیت وارد شده توسط کاربر را در خود ذخیره می کنند ولی در ری اکت این وضعیت توسط هوک useState تغییر می کند.

ایجاد پروژه ریکت

ابتدا به ایجاد پروژه React می پردازیم. برای اینکار نرم افزار VS Code را باز کرده و به پوشه مورد نظر بروید. سپس کد زیر را در ترمینال آن وارد نمایید.

npx create-react-app form

به جای “form” می توانید نام پروژه خود را وارد نمایید.

بیشتر بخوانید: ایجاد پروژه React با TypeScript

ایجاد فرم در ری اکت (React JS)

بعد از نصب و راه اندازی پروژه ری اکت، به فایل App.js رفته و کدهای داخل فایل App را به صورت زیر تغییر دهید.

import React, { useState } from "react";
import "./App.css";

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

  const usernameOnChange = (event) => {
    setUsername(event.target.value);
  };

  const passwordOnChange = (event) => {
    setPassword(event.target.value);
  };

  const onSubmitForm = (event) => {
    event.preventDefault();
    alert(username + " - " + password);
  };

  return (
    <form onSubmit={onSubmitForm}>
      <input
        type="text"
        value={username}
        onChange={usernameOnChange}
        placeholder="Enter username"
      />
      <input
        type="password"
        value={password}
        onChange={passwordOnChange}
        placeholder="Enter passwordّ"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

export default App;

در این روش از کدهای HTML و هوک useState برای ایجاد و استفاده از فرم در ری اکت (React)، استفاده شده است. در این مثال نام کاربری و رمز عبور از کاربر گرفته می شود و توسط تابع alert نمایش داده می شود.

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

در این مثال با هر بار وارد کردن مقداری در هر یک از فیلدها، تابع onChange آن فراخوانی می شود و وضعیت state آن را تغییر می دهد. کاربر نیز همزمان با وارد کردن مقداری در فیلدها می تواند مقادیر آن را مشاهده نماید.

به یاد داشته باشید که در فرم ری اکت همیشه مقدار input از state گرفته می شود.

افزودن کتابخانه ها

در این قسمت از ایجاد فرم در React ما از useState برای نگه داری اطلاعات فرم استفاده می کنیم. بنابراین کد زیر را ایمپورت می کنیم.

import React, { useState } from "react";

ارسال داده ها به سرور

همان طور که مشاهده می کنید فرم از دو فیلد با نامها username و password و دکمه Submit برای ارسال داده ها تشکیل شده است.

<form onSubmit={onSubmitForm}>

در onSubmit به فرم اعلام می کنیم که بعد از فشرده شدن دکمه ، تابع onSubmitForm را فراخوانی کند.

const onSubmitForm = (event) => {
    event.preventDefault();
    alert(username + " - " + password);
};

در تابع onSubmitForm از ارسال داده ها از طریق خود form جلوگیری می کنیم. ما برای نمایش داده ها از alert استفاده کرده ایم اما می توان داده ها را با متدهای ارسال داده به سرور در React، ارسال کرد.

البته ناگفته نماند که هر یک از توابع مانند onChange و onSubmit را نیز می توانید مانند زیر بنویسید.

<input
    type="text"
    value={username}
    onChange={(e)=>{
        setUsername(e.target.value);
    }}
    placeholder="Enter username"
/>

هر کدام از پیاده سازی ها درست بوده و بستگی به سلیقه برنامه نویس دارد.

فیلدهای فرم React

برای ذخیره کردن داده های فیلد ها از کدهای زیر استفاده می کنیم.

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

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

<input
    type="text"
    value={username}
    onChange={usernameOnChange}
    placeholder="Enter username"
/>

در این قسمت، فرم React ایجاد شده دارای فیلدهایی است که مانند کد HTML می باشد. در بخش value داده خود فیلد را قرار می دهیم و در onChange مشخص می کنیم که در صورت تغییر مقدار فیلد، تابع usernameOnChange فراخوانی شود.

const usernameOnChange = (event) => {
    setUsername(event.target.value);
};

با استفاده از تابع usernameOnChange مشخص می کنیم که مقدار ورودی در username قرار بگیرد.

چرا از useState در ایجاد فرم React استفاده می کنیم؟

ما می توانستیم کدهای مربوط به ذخیره سازی داده ها را مانند زیر نیز بنویسیم.

let username = "";
const usernameOnChange = (event) => {
    username = event.target.value;
};

در این کد از useState استفاده نکرده ایم و عملیات ارسال داده ها هم به خوبی انجام می شود. موردی که باید در نظر داشته باشیم این است که با استفاده از useState به توابع داخلی React JS دسترسی خواهیم داشت و در واقع این متد جایگزین this.state می باشد.

اعتبارسنجی داده های فرم در React

مثل تمام فرمهای دیگر داده ها را در React JS نیز قبل از ارسال به سرور باید اعتبار سنجی کنیم. برای این کار خارج از تابع App کد زیر را قرار دهید.

export const validPassword = new RegExp('^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$');

در این اعتبار سنجی می خواهیم درست بودن رمز عبور را بررسی نماییم. بنابراین تابع onSubmitForm را بصورت زیر تغییر می دهیم.

const onSubmitForm = (event) => {
    event.preventDefault();
    if (validPassword.test(event.target.value)) {
      alert(username + " - " + password);
    } else {
      setPasswordError("Your password is invalid");
    }
};

همانطور که مشاهده می کنید داده ها را زمانی ارسال می کنیم که رمز عبور براساس Regex درست باشد.

بعد از باز کردن با VS Code دستور زیر را بزنید تا ماژولها نصب شوند.

npm i

المنتهایی برای ایجاد فرم در React

المنت text، number، password و المنتهای متنی

این نوع المنتها متنی را در خود ذخیره می کنند. درست است که number از نوع عدد هست ولی باز هم از دید المنتهای HTML، نوعی متن به شما می رود.

<input
    type="text"
    value={username}
    onChange={(e)=>{
        setUsername(e.target.value);
    }}
    placeholder="Enter username"
/>

تنها تفاوت آنها در type آنها می باشد که می توانید با تغییر دادن آن انواع المنتها را پیاده سازی کنید. هر المنت دارای type، value، و موارد دیگر بسته به نیاز، می تواند وجود داشته باشد. این قوانین المنتها از قوانین المنتهای HTML پیروی می کنند. مقادیر این المنتها هم مقداری است که کاربر وارد کرده است.

المنت textarea

این المنت مانند المنتهای قبلی، متنی می باشد اما به این دلیل آن را جدا کردیم که برای نمایش مقدار آن از دو روش می توان استفاده کرد.

<textarea value={textareaValue} onChange={(e)=>{setTextareaValue(e.target.value)}} />

روش اول که بهترین روش می باشد، به صورت بالا نوشته می شود.

<textarea onChange={(e)=>{setTextareaValue(e.target.value)}} >{textareaValue}</textarea>

روش دوم هم به این صورت می باشد.

اما چرا روش اول بهترین روش است؟ به این خاطر که در روش اول اگر بخواهیم به صورت برنامه نویسی مقدار textarea را در ری اکت تغییر دهیم، کافیست از setTextareaValue استفاده نماییم. اما در روش دوم نمی توان با این روش مقدار textarea را تغییر داد.

المنت radio

این المنت نیز مانند المنت radio در HTML برای انتخاب یک گزینه از بین چند گزینه استفاده می شود.

<input
    type="radio"
    value="Male"
    defaultChecked={true}
    name="gender"
    onChange={(e) => {
        alert(e.target.value);
    }}
/>Male

<input
    type="radio"
    value="Female"
    name="gender"
    onChange={(e) => {
        alert(e.target.value);
    }}
/>Female

نکته ای که اینجا باید مد نظر داشت این است که در React برای انتخاب پیش فرض یک radio از defaultChecked استفاده می شود نه از checked. زیرا استفاده از checked باعث ایجاد ایرادات فنی می شود.

المنت checkbox

این المنت برای انتخاب از طریق تیک زدن به کار می رود. این المنت کمی با radio تفاوت دارد از این لحاظ که در radio مقدار یا همان value را نمایش می دادیم اما در اینجا چون مقدار وجود ندارد از checked استفاده خواهیم کرد.

<input
    type="checkbox"
    name="mail"
    defaultChecked={true}
    onChange={(e) => {
        alert(e.target.checked);
    }}
/>

المنت select

این المنت نیز برای انتخاب گزینه از بین گزینه ها استفاده می شود.

<select
    value={selectValue}
    onChange={(e) => {
        alert(e.target.value);
        setSelectValue(e.target.value);
    }}
    >
    <option value="1">A</option>
    <option value="2">B</option>
    <option value="3">C</option>
    <option value="4">D</option>
</select>

در اینجا selectValue از هوک useState استفاده می کند تا مقدار انتخاب شده را نگه دارد. اما صفت value با این مقدار ست می شود تا گزینه انتخابی را نمایش دهد. در هالی که در HTML گزینه انتخابی با صفت selected مشخص می شود.

المنت file

از این المنت برای آپلود فایل استفاده می شود.

ایجاد فرم ری اکت (React) با استفاده از Formik

استفاده از روش بالا می تواند خسته کننده باشد زیرا برای هر ورودی باید هندلر بنویسیم تا داده های فرم را جمع آوری کنیم. کامپاننت Formik یکی از کامپاننت هایی است که ایجاد و کار با فرم ها را در React بسیار ساده نموده است. بطوری که از طریق آن دیگر نیازی به استفاده از useState برای ذخیره سازی داده ها وجود ندارد.

اعتبار سنجی مقدار ورودی توسط کاربر، نظارت بر فیلد‌های مشاهده‌شده و کنترل نحوه ثبت فرم از مواردی است که در Formik می توانید به راحتی کنترل کنید.

نصب Formik

برای نصب Formik کافیست آن را از طریق npm نصب نمایید.

npm i formik

استفاده از Formik برای ایجاد فرم ها

در پروژه خود به فایل App.js برگردید و کد زیر را در بالا ایمپرت نمایید.

import { Formik, Field, Form } from "formik";

در این کد ما از خود Formik و Field و Form استفاده خواهیم کرد. در ادامه نحوه اعتبار سنجی داده ها نیز اضافه خواهند شد که در بخش مربوطه به آن خواهیم پرداخت.

کدهای زیر نحوه استفاده از Formik در ری اکت را به صورت ابتدایی پیاده سازی می کند.

import React from "react";
import { Formik, Field, Form } from "formik";
import "./App.css";

function App() {
  return (
    <Formik
      initialValues={{ username: "", password: "" }}
      onSubmit={(values) => {
        alert("username=" + values.username + " and password=" + values.password);
      }}
    >
      {() => (
        <Form>
          <div>
            <label htmlFor="username">Username</label>
            <Field type="username" name="username" />
          </div>
          <div>
            <label htmlFor="password">Password</label>
            <Field type="password" name="password" />
          </div>
          <div className="">
            <button type="submit">Submit</button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

export default App;

کد فایل App.js خود را مانند کدهای بالا تغییر دهید.

در قسمت initialValues به Formik اعلام می کنیم که فیلدهای فرم دارای چه مقادیر اولیه ای باشند. این مقدار دهی بیشتر در فرم ویرایش به درد می خورد. در فرم ویرایش داده ها از سرور دریافت شده و در فیلدهای مربوطه نمایش داده می شود تا کاربر آن ها را ویرایش کند.

تابع onSubmit زمانی فراخوانی می شود که بر روی Submit کلیک کرده باشید. ارسال داده ها به سرور در این تابع انجام می شود که ما برای سادگی فقط آنها را نمایش می دهیم. داده ها از طریق متغیر values به تابع onSubmit ارسال می شوند.

در قسمت رندر فرم، ابتدا تگ Form را قرار داده و فیلدها را داخل آن می نویسیم. تگ Field همان وظیفه input در مثالهای بالا را دارد با این تفاوت که از Formik برای کنترل ورودی ها استفاده می کند.

اعتبارسنجی داده ها در Formik با استفاده از Yup

برای اعتبارسنجی داده از کامپاننت Yup استفاده می کنیم. ابتدا با استفاده از کد زیر Yup را نصب می کنیم.

npm i yup

سپس آن را به فایل ایمپورت می کنیم.

import * as Yup from "yup";

برای استفاده از اعتبارسنجی، کد فرم شما باید به شکل زیر باشد.

import React from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./App.css";

function App() {
  const SchemaLoginForm = Yup.object().shape({
    username: Yup.string().required("Username is required."),
    password: Yup.string()
      .matches(
        /^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$/,
        "Password has wrong character."
      )
      .required("Password is required"),
  });

  return (
    <Formik
      validationSchema={SchemaLoginForm}
      initialValues={{ username: "", password: "" }}
      onSubmit={(values) => {
        alert(
          "username=" + values.username + " and password=" + values.password
        );
      }}
    >
      {() => (
        <Form>
          <div>
            <label htmlFor="username">Username</label>
            <Field type="username" name="username" />
            <ErrorMessage name="username">
              {(msg) => <di>{msg}</di>}
            </ErrorMessage>
          </div>
          <div>
            <label htmlFor="password">Password</label>
            <Field type="password" name="password" />
            <ErrorMessage name="password">
              {(msg) => <div>{msg}</div>}
            </ErrorMessage>
          </div>
          <div className="">
            <button type="submit">Submit</button>
          </div>
        </Form>
      )}
    </Formik>
  );
}

export default App;

قبل از هر چیز با استفاده از Yup شمایی برای اعتبارسنجی مانند کد زیر ایجاد می کنیم.

const SchemaLoginForm = Yup.object().shape({
    username: Yup.string().required("Username is required."),
    password: Yup.string()
      .matches(
        /^(?=.*?[A-Za-z])(?=.*?[0-9]).{6,}$/,
        "Password has wrong character."
      )
      .required("Password is required"),
  });

همانطور که مشاهده می کنید، در این کد نحوه اعتبارسنجی username و password مشخص می شود.

حال با استفاده از کد زیر به Formik شمای اعتبارسنجی را تعریف می کنیم.

validationSchema={SchemaLoginForm}

برای هر فیلدی که می خواهیم نتیجه اعتبارسنجی آن نمایش داده شود قسمتی با عنوان Error مانند کد زیر در نظر می گیریم.

<label htmlFor="username">Username</label>
<Field type="username" name="username" />
<ErrorMessage name="username">
    {(msg) => <di>{msg}</di>}
</ErrorMessage>

متغیر msg برای Formik تعریف شده است. اگر مقداری برای متغیر قرار داده شود آن را در قسمت مربوطه نمایش خواهد داد. در این مثال اگر بدون وارد کردن نام کاربری یا رمز عبور دکمه Submit را کلیک نمایید، خطایی در زیر نام کاربری با عنوان ” Username is required” مشاهده خواهید کرد. این خطا برای رمز عبور هم ست شده است.

بعد از باز کردن با VS Code دستور زیر را بزنید تا ماژولها نصب شوند.

npm i