Para empezar con Formik, tendremos que añadirlo a nuestro proyecto:
123yarnadd formik#o npm i –save formik</pre
bash
Vamos a empezar con una nueva forma:
123456789101112131415importReactfrom'react';import{Formik}from'formik';constBookForm=()=&gt;{return(&lt;Formik initialValues={{{{nombre de pila: '', apellido:'',}} enSubmit={()=&gt;consola. log('¡formulario enviado!!')} render={(formProps)=&gt;(…)}/&gt;)}</pre
javascript
Este ejemplo muestra una forma básica con tres propiedades requeridas:
- Valores iniciales
- Método onSubmit
- método de interpretación
Valores iniciales
La propiedad initialValues representa los valores iniciales de todos los campos disponibles que estarán en su forma. Por ejemplo, si quieres dar a los usuarios la posibilidad de continuar un formulario que iniciaron en un momento anterior, puedes rellenar initialValues con esos datos guardados.
1234567&lt;Formik initialValues={{{nombre:'Marqués', apellido:'Woodson',}}…/&gt;/pre
js
Método onSubmit
Como su nombre indica, onSubmit es la función que se quiere llamar cuando se presenta el formulario. Los argumentos proporcionados son (vales, formikBag) . Values es un objeto con los valores de todos los campos de form's. El formikBag es un objeto que contiene todos los props y métodos inyectados de form&apos, como isValid , setFieldValue , y muchos otros métodos de formas.
1234567891011&lt;Formik initialValues={{{nombre:'Marques', apellido:'Woodson',}} onSubmit={(valores)=&gt;{if(valores. nombre&amp;&amp; valores.apellido){consola.log('¡sometimiento de formulario completo!!');}}/&gt;</pre>.;
js
método de interpretación
El método render es donde se renderiza la forma real. La función de render proporciona un parámetro de forma props que contiene los valores , errores , handleChange method, handleSubmit method, y handleBlur method.
1234567891011121314151617&lt;Formik initialValues={{{nombre:'Marques', apellido:'Woodson',}} onSubmit={(valores)=&gt;{if(values.firstName&amp;&amp; values.lastName){console.log('form submission complete!! ');}} render={({handleChange, handleSubmit, handleBlur, values, errors})=&gt;(&lt;form&gt;&lt;input onChange={handleChange} onBlur={handleBlur} value={valores. firstName}…/&gt;&lt;botón onClick={handleSubmit}&gt;Submit&lt;/botón&gt;&lt;/form&gt;)}/&gt;</pre>
js