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

Question

我有一个使用formik库的注册表单。

我想实现这个：
如果提交表单， submit按钮和input字段应该被disabled 。

为了实现这一点，我做了如下：

• 解构isSubmitting和setSubmitting ，
• onSubmit中的setSubmitting(true) ，
• disabled: isSubmitting在inputProps组件的FFInput中，并且
• 我还在提交按钮中写了disabled={isSubmitting} 。

但仍然disabled不工作。 如何解决这个问题？

密码箱中的代码：
https://codesandbox.io/s/quiet-sea-zkix7
由于某种原因，在沙箱中添加了另一个错误，它在文本编辑器中不存在

注意：我已经在代码（下面）中进行了注释，以突出显示这些是相关的更改。

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 为您提供了一系列工具作为 onSubmit 处理程序的第二个参数，您可以使用它获得setSubmitting ，然后使用该setSubmitting function 来控制提交 state，如下所示：

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