I have a registration form using the formik
library.
I want to implement this:
If submitting the form, the submit
button and input
fields should be disabled
.
To achieve that, I did as follows:
isSubmitting
and setSubmitting
,setSubmitting(true)
in onSubmit
, disabled: isSubmitting
within inputProps
of FFInput
Component, and disabled={isSubmitting}
in submit button. But still disabled
don't work. How to fix this problem?
Code in codesandbox:
https://codesandbox.io/s/quiet-sea-zkix7
For some reason another error was added in the sandbox, it is not present in the text editor
Note: I've commented within the code (below) to highlight these are relevant changes.
const FForm = () => {
const {
// ...
handleSubmit, handleChange, isSubmitting, setSubmitting // destructured here:
} = useFormik({
initialValues: { username: '', email: '', password: '', confirm_password: '' },
validateOnBlur: false,
validateOnchange: false,
validationSchema: yup.object().shape({...}),
onSubmit: async (formValues) => {
console.log('submit', formValues);
setSubmitting(true) //disabled
try {
const res = api('posts', { method:'POST', body: JSON.stringify(formValues) });
console.log('Result!',res);
} catch(e) {
console.error(e);
} finally {
setSubmitting(false);
}
},
});
return (
<form className="fform" onSubmit={handleSubmit}>
<FFInput
label="username"
id="username"
inputProps={{
//...
disabled: isSubmitting, //disabled
}}
error={errors.username}
/>
<FFInput
label="email"
id="email"
inputProps={{
// ...
disabled: isSubmitting, //disabled
}}
error={errors.email}
/>
<FFInput
label="password"
id="password"
inputProps={{
// ...
disabled: isSubmitting, //disabled
}}
error={errors.password}
/>
<FFInput
label="Confirm password"
id="confirm_password"
inputProps={{
// ...
disabled: isSubmitting, //disabled
}}
error={errors.confirm_password}
/>
<button type="submit" disabled={isSubmitting}> // disabled
Submit Form
</button>
</form>
);
};
export default FForm;
Formik gives you a bunch of tools as second parameter of your onSubmit handler, you get setSubmitting
with that and then use that setSubmitting
function to control the submitting state like this:
onSubmit: async (formValues, { setSubmitting }) => {
console.log('submit', formValues);
setSubmitting(true) //disabled
try {
const res = api('posts', { method:'POST', body: JSON.stringify(formValues)});
console.log('Result!',res);
} catch(e) {
console.error(e);
} finally {
setSubmitting(false);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.