React Antd Form 禁用提交按钮

在 React Antd Form 中，我们可以很方便地实现表单的构建和提交。但是，在某些情况下，我们需要禁用提交按钮，例如表单正在提交时，或者表单数据不完整时。

禁用提交按钮的实现方式

禁用提交按钮有多种实现方式，这里提供一种基于 React Antd Form 的实现方式。

方式一：使用状态

import { Form, Button } from 'antd';
import { useState } from 'react';

function MyForm() {
  const [loading, setLoading] = useState(false);

  const onFinish = (values) => {
    setLoading(true);
    // submit form data
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item>
        <Button type="primary" htmlType="submit" loading={loading} disabled={loading}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

在上述代码中，我们使用了 useState 钩子函数，定义了一个名为 loading 的状态，并将其初始值设为 false。当表单提交时，我们通过 onFinish 函数将 loading 状态设置为 true，这样按钮就处于 loading 状态，并且同时禁用了提交功能。

方式二：使用表单校验

import { Form, Button } from 'antd';

function MyForm() {
  const [form] = Form.useForm();

  const onFinish = (values) => {
    // submit form data
  };

  return (
    <Form form={form} onFinish={onFinish}>
      <Form.Item
        name="username"
        rules={[{ required: true, message: 'Please input your username!' }]}
      >
        <Input placeholder="Username" />
      </Form.Item>

      <Form.Item
        name="password"
        rules={[{ required: true, message: 'Please input your password!' }]}
      >
        <Input.Password placeholder="Password" />
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" disabled={!(form.getFieldError('username') || form.getFieldError('password'))}>
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
}

在上述代码中，我们使用了表单校验规则来禁用提交按钮。在 Form.Item 中设置了字段的校验规则，当校验不通过时，会在 getFieldError 函数中返回错误信息，我们通过判断 getFieldError('username') 和 getFieldError('password') 是否有值来确定是否禁用提交按钮。

总结

通过以上两种方式，我们可以很方便地禁用 React Antd Form 的提交按钮。使用状态的方式适用于需要控制异步操作的场景，而使用表单校验的方式适用于需要检查数据完整性的场景。