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

Question

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

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

为了实现这一点，我做了以下事情：

• 破坏了CCD_ 5和CCD_
• CCD_ 7在CCD_
• FFInput组件的inputProps中的disabled: isSubmitting，以及
• 我还在提交按钮中写了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);
}
}