输入字段和提交按钮不是 "disabled"。为什么？

Question

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

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

为此，我做了如下操作：

解构 isSubmitting 和 setSubmitting,
setSubmitting(true) 在 onSubmit,
disabled: isSubmitting 在 FFInput 组件的 inputProps 内，并且
我在提交按钮里也写了disabled={isSubmitting}

但是disabled还是不行。如何解决这个问题？

codesandbox 中的代码：
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 函数来控制提交状态，如下所示：

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

输入字段和提交按钮不是 "disabled"。为什么？

INPUT fields and SUBMIT button are not "disabled". Why?

javascript

reactjs

formik