SabrinaMiranda/desafio-react-e-typescript-sabrina-miranda
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf(Newsletter): Altera o código para melhor desempenho

Browse Source
This commit is contained in:
Sabrina Miranda 2023-01-09 22:15:37 -03:00
parent e55d522187
commit 5e5b51a016
2 changed files with 15 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Newsletter/Newsletter.module.scss
View File

@ -55,7 +55,7 @@
&__items {
display: flex;
flex-direction: row;
align-items: flex-start;
align-items: center;
justify-content: center;
gap: 8px;

27
src/components/Newsletter/Newsletter.tsx
View File

@ -1,10 +1,11 @@
import React from 'react';
import React from "react";
import { Formik, Form, Field, ErrorMessage} from "formik";
import { Formik, Form, Field, ErrorMessage, FormikHelpers} from "formik";
import styles from "./Newsletter.module.scss";
import NewsletterSchema from './Schema/NewsletterSchema';
import NewsletterSchema from "./Schema/NewsletterSchema";
import { Button } from "../Button/Buttom";
interface NewsletterValue {
email: string;
@ -14,18 +15,20 @@ const initialValue = {
email: "",
}
let listEmail: Array<NewsletterValue> = [];
const Newsletter = () => {
const handleFormikSubmit = (values: NewsletterValue) => {
//console.log(values);
const handleSubmit = (values: NewsletterValue, actions: FormikHelpers<NewsletterValue>) => {
listEmail.push(values);
console.log(listEmail);
actions.resetForm();
};
return (
<div className={styles["newsletter__container"]}>
<Formik
onSubmit={(values, { resetForm }) => {
handleFormikSubmit(values);
resetForm(); }}
onSubmit={handleSubmit}
initialValues={initialValue}
validationSchema={NewsletterSchema} >
@ -35,14 +38,12 @@ const Newsletter = () => {
<div className={styles["newsletter__form__items"]}>
<div className={styles["newsletter__form__items__email"]}>
<Field id="email" name="email" placeholder='E-mail' className={errors.email && touched.email && "invalid"}
<Field id="email" name="email" placeholder="E-mail" className={errors.email && touched.email && "invalid"}
/>
<ErrorMessage component="span" name="email" className={styles["form-invalid-feedback"]}/>
<ErrorMessage component="span" name="email" className={styles["newsletter-invalid-feedback"]}/>
</div>
<button className={styles["newsletter__form__items__btn"]} type="submit">
Enviar
</button>
<Button type="submit" text="Enviar" className={styles["newsletter__form__items__btn"]} />
</div>
</Form>
)}