reactjs - React antd 表单禁用提交按钮

Question

如何使用 antd 禁用表单提交按钮

表单验证有效，但是当验证失败时我需要在视觉上禁用表单提交按钮

这是一个 stackblitz 网址 https://stackblitz.com/edit/react-ts-z5d6tr?file=Hello.tsx

标签： reactjsantd

Answer 1

我找到了一些优雅的方式来执行这个

<Form.Item shouldUpdate className="submit">
  {() => (
    <Button
      type="primary"
      htmlType="submit"
      disabled={
        !form.isFieldsTouched(true) ||
        form.getFieldsError().filter(({ errors }) => errors.length)
          .length > 0
      }
    >
      Log in
    </Button>
  )}
</Form.Item>