Saltar al contenido

Validar las formas de React-Bootstrap con Formik

Para empezar con Formik, tendremos que añadirlo a nuestro proyecto:

123yarnadd formik#o npm i –save formik</pre
bash

Validar las formas de React-Bootstrap con Formik
Validar las formas de React-Bootstrap con Formik

Vamos a empezar con una nueva forma:

123456789101112131415importReactfrom'react';import{Formik}from'formik';constBookForm=()=>{return(<Formik initialValues={{{{nombre de pila: '', apellido:'',}} enSubmit={()=>consola. log('¡formulario enviado!!')} render={(formProps)=>(…)}/>)}</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<Formik initialValues={{{nombre:'Marqués', apellido:'Woodson',}}…/>/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<Formik initialValues={{{nombre:'Marques', apellido:'Woodson',}} onSubmit={(valores)=>{if(valores. nombre&& valores.apellido){consola.log('¡sometimiento de formulario completo!!');}}/></pre&gt.;
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<Formik initialValues={{{nombre:'Marques', apellido:'Woodson',}} onSubmit={(valores)=>{if(values.firstName&& values.lastName){console.log('form submission complete!! ');}} render={({handleChange, handleSubmit, handleBlur, values, errors})=>(<form><input onChange={handleChange} onBlur={handleBlur} value={valores. firstName}…/><botón onClick={handleSubmit}>Submit</botón></form>)}/></pre>
js