🙈
React
  • 🧑‍💻Full-Stack Web Developer
  • 📚Теорія
    • 1️⃣Введення в React
      • Веб-застосунки
      • Бібліотека React
      • Інструменти
      • Створення і клонування своєї збірки React на базі Create React App
      • Елементи в React
      • JSX
      • Компоненти
      • Рендер за умовою
      • Колекції
    • 2️⃣Стилізація
      • Вбудовані стилі
      • Ванільний CSS
      • CSS модулі
      • Стилізовані компоненти
      • Нормалізація стилів
    • 3️⃣Події та стан
    • 4️⃣Форми
      • Formik
      • Yup валідація форм Formik
    • 5️⃣Життєвий цикл
    • 6️⃣HTTP-запити
    • 7️⃣React-хуки
    • 8️⃣Контекст та рефи
    • 9️⃣Маршрутизація
      • Маршрутизація
      • Компонент <BrowserRouter>
      • Компоненти <Route> та <Routes>
      • Компоненти <Link> та <NavLink>
      • URL-параметри
      • Вкладені маршрути
      • Індексні маршрути
      • Програмна навігація
      • Рядок запиту
      • Обʼєкт місцезнаходження
      • Розподілення коду
    • 🔟Redux Toolkit
      • Управління станом
    • 🕚Асинхронний Redux
    • Бібліотека Redux Persist для роботи з localstorage
    • Помилка non-serializable value і її виправлення
    • переключення теми
    • 👷Практика
  • Про мене
    • Про мене
Powered by GitBook
On this page
  1. Теорія
  2. Форми

Formik

import React from 'react';

// Бібліотека формік
import { Formik, Form, Field } from 'formik';

//  Компонент форми
const RegisterForm = () => {
  // початкові значення полів форми
  const initialValues = { name: '', email: '', password: '' };

  // Обробник сабміту
  const handleSubmit = (values, actions) => {
    // у обʼєкт values повертаються дані з форми
    console.log('values', values);
    // тут буде проходити реєстрація
    actions.resetForm();
  };

  return (
    <div>
      <Formik
        initialValues={initialValues}
        onSubmit={handleSubmit}
      >
        <Form autoComplete="off">
          <label htmlFor="name">Name</label>
          <Field type="text" name="name" placeholder="Enter your name" />

          <label htmlFor="email">
            Email
            <Field type="text" name="email" placeholder="Enter email" />
          </label>

          <label htmlFor="name">
            Password
            <Field
              type="password"
              name="password"
              placeholder="Enter password"
            />
          </label>

          <button type="submit">Sign Up</button>
        </Form>
      </Formik>
    </div>
  );
};

export default RegisterForm;
PreviousФормиNextYup валідація форм Formik

Last updated 1 year ago

📚
4️⃣