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

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

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

formik چیست؟

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

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

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

با قرار دادن همه موارد فوق در یک مکان، 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>
  );
};

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

کلیک کنید

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

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

این کار با تابع 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() سریعتر و آسانتر میتوانید مقدار فیلد ها را برای ذخیره در استیت مربوطه ارسال کنید. کد زیر با استفاده از getFieldProps نوشته شده است:



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>
  );
};

در نظر داشته باشید میتوانید با استفاده از کامپوننت های 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 نهایت استفاده را برده باشید و آن را با دوستانتان به اشتراک بگذارید. تیم تولید محتوای مدرسه اینترنتی پرنیان این مقاله را تهیه کرده است.

trainingsitedesign

trainingsitedesign

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

2 نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

کلاس طراحی سایت