Criando formulários no React com Formik
Criar formulários no React é uma verdadeira dor de cabeça. Precisamos lidar com todas as mudanças de valor. Para caixas de texto de entrada, precisamos obter o valor e atualizar o estado com nosso próprio código. Para outros controles de formulário, como caixas de seleção e botões de opção, ainda é mais difícil.
Uma biblioteca que ajuda a facilitar nossas vidas é o Formik . Neste artigo, veja como usar o Formik no nosso aplicativo React for create fomulários.
Começando
Para começar, primeiro instale ou pacote Formik NPM.
Faz o seguinte comando:
yarn add formikEm seguida, podemos começar a criar nosso formulário.
Para fazer isso, incluir ou incluir um Formikcomponente no nosso aplicativo, que pode usar nossos componentes de controle de formulário dentro dele.
Então, o estado será atualizado sem escrever muito código.
Para criar um formulário simples, podemos escrever:
import React from "react";
import { Formik } from "formik";
export default function App() {
return (
<div className="App">
<Formik
initialValues={{ firstName: "", lastName: "" }}
validate={values => {
const errors = {};
if (!values.firstName) {
errors.firstName = "Required";
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting
}) => (
<form onSubmit={handleSubmit}>
<input
type="text"
name="firstName"
onChange={handleChange}
onBlur={handleBlur}
value={values.firstName}
/>
<br />
{errors.firstName && touched.firstName && errors.firstName}
<br />
<input
type="text"
name="lastName"
onChange={handleChange}
onBlur={handleBlur}
value={values.lastName}
/>
<br />
{errors.lastName && touched.lastName && errors.lastName}
<br />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</form>
)}
</Formik>
</div>
);
}Nenhum código acima, adiciona ou Componente Formik, que possui vários acessórios.
O initialValuenos permite especificar os valores dos campos do formulário.
O validatenos permite especificar regras de validação.
É uma função que pega os valores e vamos retornar um objeto errorscom a chave sendo a chave do valor do formulário e o valor sendo a mensagem de erro.
onSubmit é uma função que executa quando clique em Enviar.
Tudo o que fazemos é mostrar uma caixa de alerta com os valores inseridos para simplificar as coisas neste exemplo.
O setSubmitting é uma função chamada para informar ao Formik se estamos enviando ou não.
Se terminarmos, passaremos falsepara setSubmittingo que fizemos acima.
A função que passamos para o onSubmit não será chamada até que todos os campos do formulário tenham dados válidos.
Dentro do Formik temos uma função com um parâmetro de objeto com muitas propriedades.
E retornamos nosso elemento de formulário, que possui 2 controles de texto de entrada.
O handleChangeparâmetro possui o manipulador de alterações que precisamos para lidar com qualquer alteração no valor do formulário.
O handleSubmitpossui nosso manipulador de envio que definimos no onSubmit.
handleBlurpossui o onBlurmanipulador para o elemento do formulário.
Exibimos os objetos de erro depois que o controle de entrada é tocado e o objeto erroré preenchido.
Também isSubmittingé um parâmetro útil que nos permite saber se o formulário está sendo enviado ou não.
Se estiver sendo enviado, podemos desabilitar o botão Enviar para que não possamos enviar novamente.
valuestem o valor do formulário que podemos definir como o valor dos nossos elementos de entrada.
Tornando as coisas mais simples
Felizmente, não precisamos escrever todo esse código explicitamente todas as vezes.
Formik nos fornece os componentes Form, Fielde ErrorMessage para que possamos construir formulários, campos de formulário e mensagens de erro de exibição, respectivamente.
Podemos simplificar nosso exemplo anterior escrevendo:
import React from "react";
import { Formik, Form, Field, ErrorMessage } from "formik";
function App() {
return (
<div className="App">
<Formik
initialValues={{ firstName: "", lastName: "" }}
validate={values => {
const errors = {};
if (!values.firstName) {
errors.firstName = "Required";
}
return errors;
}}
onSubmit={(values, { setSubmitting }) => {
setTimeout(() => {
alert(JSON.stringify(values, null, 2));
setSubmitting(false);
}, 400);
}}
>
{({ isSubmitting }) => (
<Form>
<Field type="text" name="firstName" />
<br />
<ErrorMessage name="firstName" component="div" />
<br />
<Field type="text" name="lastName" />
<br />
<ErrorMessage name="lastName" component="div" />
<br />
<button type="submit" disabled={isSubmitting}>
Submit
</button>
</Form>
)}
</Formik>
</div>
);
}
export default App;Nós simplificamos muito com os Form, Fielde ErrorMessage que vêm com Formik.
Os campos estão no componente Form.
O Field possui nossas entradas de formulário.
E os ErrorMessage têm as mensagens que são exibidas.
A única propriedade passamos dentro do Formik é a isSubmitting. Ainda o usamos para definir o disabled do botão, como fizemos no exemplo anterior.
Hooks API
Como as bibliotecas React mais populares, o Formik também vem com uma API baseada em hooks.
O Formik possui o hook useFormik, que retornam uma função que podemos usar em nossos próprios formulários para manipular alterações de valor de formulário, exibir mensagens de erro e enviar formulários.
Podemos usar o hook useFormik da seguinte maneira:
import React from "react";
import { useFormik } from "formik";
const validate = values => {
const errorMsg = "Must be 20 characters or less";
const errors = {};
if (!values.firstName) {
errors.firstName = "Required";
} else if (values.firstName.length > 20) {
errors.firstName = errorMsg;
}
if (!values.lastName) {
errors.lastName = "Required";
} else if (values.lastName.length > 20) {
errors.lastName = errorMsg;
}
return errors;
};
const App = () => {
const formik = useFormik({
initialValues: {
firstName: "",
lastName: ""
},
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}
<br />
<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}
<br />
<button type="submit">Submit</button>
</form>
);
};
export default App;Separamos a função validate movendo-a para fora do Appcomponente.
O mecanismo de validação é o mesmo. Verificamos o valor dos campos do formulário especificados como chaves da propriedade initialValue.
Em App, chamamos o hook useFormik passando um objeto com a propriedade initialValues, nossa função validate e nossa função onSubmit, que serão chamadas se todos os valores inseridos forem válidos.
Ele retorna o objeto formik, que tem as propriedades handleSubmit, handleChange, errorse values, que são todos o mesmo como nos exemplos anteriores.
O benefício do uso useFormiké que podemos mover nossa parte validateexterna para fora de nosso componente.
Além disso, os métodos e propriedades de retorno podem ser usados da maneira que desejar em nossos formulários.
Isso significa que não precisamos escrever tudo explicitamente e não usar os componentes incorporados ao Formik, que são bastante restritivos.
Temos uma sintaxe limpa e flexível ao mesmo tempo com ganchos de API.
Concluindo
O Formulário é uma biblioteca fácil de usar, que permite adicionar formulários a uma aplicação Reagir com validação de formulários, sem a necessidade de lidar com os valores dos formulários.
Além disso, ele retorna erros de validação do formulário automaticamente, para que não tenhamos que lidar com eles mesmos.
Os ganchos que acompanham ou o Formik nos oferece mais flexibilidade na maneira como podemos criar nossos formulários no aplicativo React.