如何在Formik表单提交成功后禁用整个表单，禁止用户操作输入项

解决方案 #

你可以通过维护提交状态、给表单元素绑定禁用属性的方式实现需求，具体修改步骤如下：

1. 修正提交状态的拼写错误
   你当前定义的提交状态变量拼写有误，先修正：

// 原代码
const [submitted,setSubmittde] = useState(false);
// 修改为
const [submitted, setSubmitted] = useState(false);

2. 提交成功后更新提交状态
   在接口请求成功的回调中标记表单为已提交状态，同时建议将重置表单的逻辑移到成功回调内，避免提交失败时用户输入被清空：

fetch(request)
  .then((res) => res.json())
  .then((data) => {
    if (
      data.message ===
      'We have received your message and will get in touch shortly. Thanks!'
    ) {
      setState({
        msg: data.message,
      });
      setSubmitted(true); // 新增，标记表单已提交
      resetForm(); // 将原来在回调外的resetForm移到此处
    } else {
      console.log('error');
    }
  });
// 删除原来在fetch外的resetForm()调用

3. 给所有表单元素和提交按钮添加禁用属性
   为所有Field组件、提交按钮绑定disabled属性，属性值为我们维护的submitted状态：

// 输入框示例
<Field
  id="outlined-multiline-flexible"
  type="text"
  name="name"
  placeholder="Name"
  component={MyInput}
  disabled={submitted} // 新增禁用属性
/>

// 提交按钮示例
<Button
  type="submit"
  variant="contained"
  onClick={() =>
    Event(
      'Contact from',
      'Client submitted ',
      'domain',
    )
  }
  disabled={submitted} // 新增禁用属性
  style={{
    background: '#F79924',
    color: 'white',
    fontFamily: 'roboto',
    fontSize: '1rem',
  }}
>
  Submit 
</Button>

所有Field组件都需要添加上述disabled={submitted}属性。

4. 检查自定义组件属性透传
   确认你封装的MyInput和Textarea组件会将接收的disabled属性透传给内部的原生input/textarea元素，否则禁用属性不会生效。

如果需要在提交请求的过程中也防止用户重复操作，可以使用Formik内置的isSubmitting状态：
将Formik渲染回调的参数修改为{({ errors, touched, isSubmitting }) => (，然后把所有disabled属性值改为disabled={submitted || isSubmitting}即可。

内容的提问来源于stack exchange，提问作者Programmer