ReactJS中如何在antd表单提交后禁用提交按钮

通过独立的React状态维护提交中的标识，在提交函数流程中控制状态开关，再绑定到按钮的禁用属性即可，全程走React状态驱动逻辑，不需要操作DOM。

实现步骤 #

• 定义提交状态
  在组件内用useState声明专门的提交中状态，和表单业务字段隔离：

  import { useState } from 'react';
  
  // 组件内部
  const [submitting, setSubmitting] = useState(false);
  

• 改造异步提交函数
  提交启动时设置状态为true禁用按钮，流程结束后（无论成功失败）改回false，避免按钮永久不可用：

  const submitForm = async (values) => {
    // 进入提交流程，立刻禁用按钮
    setSubmitting(true);
    try {
      // 此处替换为你原有的提交逻辑：接口请求、数据处理等
      // .................
      // .................
    } catch (err) {
      // 提交失败的错误处理逻辑
      console.error('提交失败', err);
    } finally {
      // 提交流程结束，恢复按钮可点击状态
      setSubmitting(false);
    }
  }
  

• 绑定状态到提交按钮
  将submitting绑定到按钮的disabled属性，还可以额外绑定loading属性显示加载动画，交互体验更好：

  <Form.Item {...tailLayout}>
    <Button 
      type="primary" 
      htmlType="submit"
      disabled={submitting}
      loading={submitting} // 非必填，推荐添加
    >
      {formCardTitle(window.location.pathname)}
    </Button> &nbsp;
    <Button htmlType="button" onClick={onReset}>
      Reset
    </Button>
  </Form.Item>
  

注意点 #

你当前代码中给Input手动绑定value={name}和onChange维护name状态属于重复操作，Antd的Form.Item配置name属性后，会自动给子表单控件注入value和onChange，表单值统一托管在Form实例中，不需要额外维护同名状态，避免出现数据不同步的问题。

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