React Formik : how to use custom onChange and onBlur React Formik : how to use custom onChange and onBlur reactjs reactjs

React Formik : how to use custom onChange and onBlur


You'll need to remove the first handleBlur from Formik as blur event is only valid on the field level and do something like the following in your Field element:

<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        ...    }}/>

See https://github.com/jaredpalmer/formik/issues/157


i faced the same problem using onChange method, which i think do not exist in formik props.

so i used the onSubmit method as it's available in the formik props which gives us the fields values and then passed that values to the concern function like so ...

<Formik          initialValues={initialValues}          validationSchema={signInSchema}          onSubmit={(values) => {            registerWithApp(values);            console.log(values);          }}        >

and there you can use, i simply updated the state and passed it to axios like so...

    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")    };  }

and its working ...I hope its helps you.