输入字段和提交按钮未“禁用”。 为什么？

Question

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:

• destructured isSubmitting and setSubmitting ,
• setSubmitting(true) in onSubmit ,
• disabled: isSubmitting within inputProps of FFInput Component, and
• I also wrote 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;

Answer 1

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