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;
Last updated