Estoy comenzando con la biblioteca formik para reaccionar, y no puedo descifrar el uso de los accesorios handleChange y handleBlur.
De acuerdo con los documentos , handleBlur se puede configurar como accesorio en un <Formik/> , y luego debe pasarse manualmente al <input/> .
Lo intenté, sin éxito: (conservo el código sobre handleBlur para mayor claridad)
import React from "react"; import { Formik, Field, Form } from "formik"; import { indexBy, map, compose } from "ramda"; import { withReducer } from "recompose"; const MyInput = ({ field, form, handleBlur, ...rest }) => <div> <input {...field} onBlur={handleBlur} {...rest} /> {form.errors[field.name] && form.touched[field.name] && <div> {form.errors[field.name]} </div>} </div>; const indexById = indexBy(o => o.id); const mapToEmpty = map(() => ""); const EmailsForm = ({ fieldsList }) => <Formik initialValues={compose(mapToEmpty, indexById)(fieldsList)} validate={values => { // console.log("validate", { values }); const errors = { values }; return errors; }} onSubmit={values => { console.log("onSubmit", { values }); }} handleBlur={e => console.log("bluuuuurr", { e })} render={({ isSubmitting, handleBlur }) => <Form> <Field component={MyInput} name="email" type="email" handleBlur={handleBlur} /> <button type="submit" disabled={isSubmitting}> Submit </button> </Form>} />;¿Qué tiene de malo este enfoque? ¿Cómo se supone que deben usarse handleBlur y handleChange?
Deberá eliminar el primer handleBlur de Formik ya que el evento de desenfoque solo es válido en el nivel de campo y hacer algo como lo siguiente en su elemento Field:
<Field component={MyInput} name="email" type="email" onBlur={e => { // call the built-in handleBur handleBlur(e) // and do something about e let someValue = e.currentTarget.value ... }} />Enfrenté el mismo problema usando el método onChange, que creo que no existe en los accesorios de formik.
así que utilicé el método onSubmit, ya que está disponible en los accesorios de formik, que nos da los valores de los campos y luego pasé esos valores a la función de preocupación así...
<Formik initialValues={initialValues} validationSchema={signInSchema} onSubmit={(values) => { registerWithApp(values); console.log(values); }} >y allí puedes usar, simplemente actualicé el estado y lo pasé a axios así...
const [user, setUser] = useState({ name: "", email: "", password: "" }); const registerWithApp = (data) => { const { name, email, password } = data; setUser({ name:name, email:email, password:password }) if (name && email && password) { axios.post("http://localhost:5000/signup", user) .then(res => console.log(res.data)) } else { alert("invalid input") }; }y está funcionando... Espero que te ayude.