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