آموزش Formik در react به زبان ساده

احتمالا شما هم این روز ها نام فرمیک را زیاد بر سر زبان ها شنیده اید. در این مقاله قصد داریم آموزش Formik در react را برای شما عزیزان قرار دهیم تا این مهارت هم به مجموعه مهارت های شما اضافه شود. پس بزن بریم و تا پایان مقاله همراه ما باش🥰

formik چیست؟

Formik یک کتابخانه محبوب برای مدیریت فرم ها در React است. Formik به شما کمک می کند تا فرم های پیچیده را به راحتی و به سرعت ایجاد کنید.

Formik محبوب ترین کتابخانه متن باز جهان برای تگ فرم در React و React Native است.

Formik از موارد تکراری و آزاردهنده مراقبت می کند. ردیابی مقادیر خطاها فیلدهای بازدید شده، هماهنگی اعتبارسنجی و مدیریت ارسال داده ها را بر گردن دارد. این بدان معناست که شما وقت کمتری را صرف کنترل input های خود میکنید.

Formik یک کتابخانه کوچک است که در 3 قسمت آزاردهنده به شما کمک می کند:

• گرفتن مقادیر ورودی و خروجی state
• اعتبارسنجی و پیام های خطا
• رسیدگی به ارسال فرم

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

مزایای استفاده از Formik:

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

آموزش نصب Formik

برای نصب فرمیک ، ابتدا کامند زیر را بزنید:

npm install formik –save
$$$$$$ or below command
yarn add formik

هم اکنون باید در package.json و در قسمت dependencies ، مقدار Formik اضافه شده باشد.

وقت آن رسیده که سراغ یک مثال ساده از فرمیک برویم.

تصور کنید که می خواهیم یک فرم ثبت نام در خبرنامه برای یک وبلاگ اضافه کنیم. برای شروع، فرم ما فقط یک فیلد به نام ایمیل خواهیم داشت.

import React from 'react';
import { useFormik } from 'formik';

export default function SignupForm(){
  // Pass the useFormik() hook initial form values and a submit function that will
  // be called when the form is submitted
  const formik = useFormik({
    initialValues: {
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

در مثال بالا، ما مقادیر اولیه را توسط (onSubmit) فرم خود را به هوک useFormik() منتقل می کنیم. سپس هوک، اطلاعات را بصورت یک بسته و با متدهای کمکی در متغیری که فرمیک می نامیم به ما برمی گرداند.

حال اگر چند مقدار داشته باشیم میتوانیم از دستور زیر که محتوای چند اینپوت را دریافت میکند استفاده کنیم. فقط در نظر داشته باشید که به تعداد اینپوت ها، باید داخل initialValue تعریف داشته باشیم.

import React from 'react';
import { useFormik } from 'formik';

export default function SignupForm(){
  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />

      <label htmlFor="lastName">Last Name</label>
      <input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.lastName}
      />

      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />

      <button type="submit">Submit</button>
    </form>
  );
};

آیا میدانید مدرسه پرنیان، کلاس طراحی سایت حرفه ای بصورت حضوری و مجازی برگزار میکند؟

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

در فرمیک، دو مرحله کلی داریم. مرحله اول دریافت مقادیر فرم و ثبت در initialValuse و حال مرحله دوم که به سراغ اعتبار سنجی آنها میرویم.

این کار با تابع validate که در const formik فراخوانی شده است انجام میپذیرد. به کد زیر توجه کنید. شرط برای نام کوچک و بزرگ این است که زیر 15 کاراکتر باشد و شرط ایمیل هم یک RegX کامل است.

حقیقتا باید بگوییم که استفاده از فرمیک لذت بخش است😍

import React from 'react';
import { useFormik } from 'formik';
const validate = values => {
  const errors = {};
  if (!values.firstName) {
    errors.firstName = 'Required';
  } else if (values.firstName.length > 15) {
    errors.firstName = 'Must be 15 characters or less';
  }

  if (!values.lastName) {
    errors.lastName = 'Required';
  } else if (values.lastName.length > 20) {
    errors.lastName = 'Must be 20 characters or less';
  }

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  return errors;
};

export default function SignupForm(){
  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
    },
    validate,
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
      {formik.errors.firstName ? <div>{formik.errors.firstName}</div> : null}

      <label htmlFor="lastName">Last Name</label>
      <input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.lastName}
      />
      {formik.errors.lastName ? <div>{formik.errors.lastName}</div> : null}

      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email ? <div>{formik.errors.email}</div> : null}

      <button type="submit">Submit</button>
    </form>
  );
};

در مثال بالا دقت داشته باشید که با errors.firstName = ‘Required’ باعث اجباری شدن یک فیلد میشود.

امیدوارم تا به اینجای مقاله آموزش Formik در react خسته نشده باشید و حتی پیشنهاد میکنیم بعد از مطالعه کامل این مقاله، به بخش مقالات ری اکت مراجعه کنید و بیشتر مطالعه بفرمایید.

کتابخانه کمکی yup برای اعتبارسنجی آسان تر

Schema Validation with Yup

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

با خیال راحت اعتباردهنده های خود را بنویسید یا از کتابخانه کمکی3rd-party استفاده کنید. نویسندگان Formik ، بخش بزرگی از کاربران آن از کتابخانه Jason Quense Yup برای اعتبار سنجی استفاده می کنند.

پیشنهاد میکنیم آن را امتحان کنید. پس باید اول آن را نصب کنیم:

npm install yup –save
# or via yarn
yarn add yup

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

import React from 'react';
import { useFormik } from 'formik';
import * as Yup from 'yup';

export default function SignupForm(){
  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
    },
    validationSchema: Yup.object({
      firstName: Yup.string()
        .max(15, 'Must be 15 characters or less')
        .required('Required'),
      lastName: Yup.string()
        .max(20, 'Must be 20 characters or less')
        .required('Required'),
      email: Yup.string().email('Invalid email address').required('Required'),
    }),
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.firstName}
      />
      {formik.touched.firstName && formik.errors.firstName ? (
        <div>{formik.errors.firstName}</div>
      ) : null}

      <label htmlFor="lastName">Last Name</label>
      <input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.lastName}
      />
      {formik.touched.lastName && formik.errors.lastName ? (
        <div>{formik.errors.lastName}</div>
      ) : null}

      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        onBlur={formik.handleBlur}
        value={formik.values.email}
      />
      {formik.touched.email && formik.errors.email ? (
        <div>{formik.errors.email}</div>
      ) : null}

      <button type="submit">Submit</button>
    </form>
  );
};

همانطور که در کد بالا میبینید validationSchema وظیفه اعتبار سنجی کد ما را دارد.

getFieldProps()

در فرمیک ، getFieldProps یک متد است که به شما کمک می‌کند تا مقادیر مورد نیاز برای ایجاد یک فیلد ورودی (input field) در فرم را به درستی به آن اختصاص دهید. این متد به شما امکان می‌دهد تا پراپرتی‌های مختلفی مانند onChange, onBlur, value و … را به صورت خودکار به فیلد ورودی اختصاص دهید.

معمولاً مورد استفاده اصلی getFieldProps در توسعه فرم‌ها با استفاده از Formik است. این متد از توابع Formik استفاده می‌کند و به شما کمک می‌کند تا مدیریت وضعیت فیلدهای ورودی در فرم راحت‌تر شود.

در زمان استفاده از getFieldProps، شما می‌توانید پراپرتی‌های مورد نیاز خود را به عنوان آرگومان‌ها به این متد ارسال کنید. به عنوان مثال:

import { useFormik } from 'formik';

//...

const formik = useFormik({
  initialValues: {
    username: '',
    password: '',
  },
  onSubmit: values => {
    // اقدامات لازم برای ارسال اطلاعات فرم
    console.log(values);
  },
});

//...

<input
  type="text"
  {...formik.getFieldProps('username')}
/>

<input
  type="password"
  {...formik.getFieldProps('password')}
/>

در اینجا، getFieldProps برای هر فیلد ورودی ایجاد شده از Formik استفاده می‌شود و پراپرتی‌های مورد نیاز برای مدیریت این فیلدها به صورت اتوماتیک اختصاص داده می‌شوند.

کامپوننت های فرمیک

در نظر داشته باشید میتوانید با استفاده از کامپوننت های label و Field و ErrorMessage در return کامپوننت خود، فضای تمیز تر و قابل فهم تری از html داشته باشید. کد زیر را دیده و نحوه استفاده از آنها را ببینید:

import React from 'react';
import { Formik, Field, Form, ErrorMessage } from 'formik';
import * as Yup from 'yup';

export default function SignupForm (){
  return (
    <Formik
      initialValues={{ firstName: '', lastName: '', email: '' }}
      validationSchema={Yup.object({
        firstName: Yup.string()
          .max(15, 'Must be 15 characters or less')
          .required('Required'),
        lastName: Yup.string()
          .max(20, 'Must be 20 characters or less')
          .required('Required'),
        email: Yup.string().email('Invalid email address').required('Required'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      <Form>
        <label htmlFor="firstName">First Name</label>
        <Field name="firstName" type="text" />
        <ErrorMessage name="firstName" />

        <label htmlFor="lastName">Last Name</label>
        <Field name="lastName" type="text" />
        <ErrorMessage name="lastName" />

        <label htmlFor="email">Email Address</label>
        <Field name="email" type="email" />
        <ErrorMessage name="email" />

        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
};

اگر به غیر از تگ اینپوت، نیاز به تگ های دیگری از قبیل select, option, checkbox و… داشتید، کد زیر به شما کمک میکند:

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form, useField } from "formik";
import * as Yup from "yup";
import styled from "@emotion/styled";

const MyTextInput = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  return (
    <>
      <label htmlFor={props.id || props.name}>{label}</label>
      <input className="text-input" {...field} {...props} />
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};

const MyTextArea = ({label, ...props}) => {
  const [field, meta] = useField(props);
  return (
      <>
          <label htmlFor={props.id || props.name}>{label}</label>
          <textarea className="text-area" {...field} {...props} />
          {meta.touched && meta.error ? (
              <div className="error">{meta.error}</div>
          ) : null}
      </>
  );
};

const MyCheckbox = ({ children, ...props }) => {
  const [field, meta] = useField({ ...props, type: "checkbox" });
  return (
    <>
      <label className="checkbox">
        <input {...field} {...props} type="checkbox" />
        {children}
      </label>
      {meta.touched && meta.error ? (
        <div className="error">{meta.error}</div>
      ) : null}
    </>
  );
};
const StyledSelect = styled.select`
  color: var(--blue-700);
`;

const StyledErrorMessage = styled.div`
  font-size: 12px;
  color: var(--red-600);
  width: 400px;
  margin-top: 0.25rem;
  &:before {
    content: "❌ ";
    font-size: 10px;
  }
  @media (prefers-color-scheme: dark) {
    color: var(--red-300);
  }
`;

const StyledLabel = styled.label`
  margin-top: 1rem;
`;

const MySelect = ({ label, ...props }) => {
  const [field, meta] = useField(props);
  return (
    <>
      <StyledLabel htmlFor={props.id || props.name}>{label}</StyledLabel>
      <StyledSelect {...field} {...props} />
      {meta.touched && meta.error ? (
        <StyledErrorMessage>{meta.error}</StyledErrorMessage>
      ) : null}
    </>
  );
};
const SignupForm = () => {
  return (
    <>
      <h1>Subscribe!</h1>
      <Formik
        initialValues={{
          firstName: "",
          lastName: "",
          email: "",
          acceptedTerms: false, // added for our checkbox
          jobType: "" // added for our select
        }}
        validationSchema={Yup.object({
          firstName: Yup.string()
            .max(15, "Must be 15 characters or less")
            .required("Required"),
          lastName: Yup.string()
            .max(20, "Must be 20 characters or less")
            .required("Required"),
          email: Yup.string()
            .email("Invalid email addresss`")
            .required("Required"),
          acceptedTerms: Yup.boolean()
            .required("Required")
            .oneOf([true], "You must accept the terms and conditions."),
          jobType: Yup.string()
            .oneOf(
              ["designer", "development", "product", "other"],
              "Invalid Job Type"
            )
            .required("Required")
        })}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));
            setSubmitting(false);
          }, 400);
        }}
      >
        <Form>
          <MyTextArea
            label="First Name"
            name="firstName"
            rows="6"
            placeholder="Once upon a time there was a princess who lived at the top of a glass hill."
          />
          <MyTextInput
            label="Last Name"
            name="lastName"
            type="text"
            placeholder="Doe"
          />
          <MyTextInput
            label="Email Address"
            name="email"
            type="email"
            placeholder="jane@formik.com"
          />
          <MySelect label="Job Type" name="jobType">
            <option value="">Select a job type</option>
            <option value="designer">Designer</option>
            <option value="development">Developer</option>
            <option value="product">Product Manager</option>
            <option value="other">Other</option>
          </MySelect>
          <MyCheckbox name="acceptedTerms">
            I accept the terms and conditions
          </MyCheckbox>

          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </>
  );
};
function App() {
  return <SignupForm />;
}

const rootElement = document.getElementById("parsa");
ReactDOM.render(<App />, rootElement);

در انتهای مقاله هم از شما دعوت میکنم یک پسورد ولیدیشن از فورمیک مشاهده فرمایید.

import React, { useState } from 'react';
import { Formik, Form, Field } from 'formik';
import * as yup from 'yup';

const FormSchema = yup.object().shape({
  pass: yup
    .string()
    .min(8, 'Password must be 8 characters long')
    .matches(/[0-9]/, 'Password requires a number')
    .matches(/[a-z]/, 'Password requires a lowercase letter')
    .matches(/[A-Z]/, 'Password requires an uppercase letter')
    .matches(/[^\w]/, 'Password requires a symbol'),
  confirm: yup
    .string()
    .oneOf([yup.ref('pass'), null], 'Must match "password" field value'),
});

const FormComponent = () => {
  return (
    <Formik
      initialValues={{
        name: '',
      }}
      validationSchema={FormSchema}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      {({ errors }) => (
        <Form>
          <div>
            <label>
              Password
              <Field type="password" name="pass" />
            </label>
            {errors.pass && <p>{errors.pass}</p>}
          </div>
          <div>
            <label>
              Password Confirm
              <Field type="password" name="confirm" />
            </label>
            {errors.confirm && <p>{errors.confirm}</p>}
          </div>
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>
  );
};

export default function App() {
  return (
    <div>
      <FormComponent />
    </div>
  );
}

نکات و جزئیات بسیار است و از حوصله این مقاله خارج. اما سعی کردیم توضیحات کلی از چگونگی کارکرد این پکیج با ارزش در اختیارتان قرار دهیم. میتوانید با مراجعه به سایت formik مطالعه کاملتری نسبت به جزئیات آن داشته باشید.

امیدواریم از این مقاله آموزش Formik در react نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.