formik_-_biblioteka_roboti_z_formami_u_react [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== Formik - бібліотека роботи з формами у react ======

===== Установка Formik =====
<code>
npm install formik
</code>
===== Використання =====
В HTML-документі компонент Form рендерить звичайний тег form, але з розширеним функціоналом бібліотеки Formik.
Для того, щоб можна було відправити форму, використовуємо тег button, для кнопки відправки в бібліотеці немає спеціального компонента.
<code>
import { Formik, Form } from 'formik';


const FeedbackForm = () => {
  return (
    <Formik initialValues={{}} onSubmit={() => {}}>
			<Form>
				<button type="submit">Submit</button>
			</Form>
    </Formik>
  );
};

</code>

===== Елементи форми =====
В бібліотеці Formik немає компонентів для створення label та інших семантичних елементів форми, таких як fieldset та legend. Для цього використовуються звичайні теги. Не забуваємо використовувати хук useId для створення унікальних ідентифікаторів полів.
<code>
import { useId } from "react";
import { Formik, Form, Field } from "formik";

const initialValues = {
  username: "",
  email: "",
};

const FeedbackForm = () => {
  const nameFieldId = useId();
  const emailFieldId = useId();

  const handleSubmit = (values, actions) => {
    console.log(values);
    actions.resetForm();
  };

  return (
    <Formik initialValues={initialValues} onSubmit={handleSubmit}>
      <Form>
        <label htmlFor={nameFieldId}>Username</label>
        <Field type="text" name="username" id={nameFieldId} />

        <label htmlFor={emailFieldId}>Email</label>
        <Field type="email" name="email" id={emailFieldId} />

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

</code>