React antd 表单禁用提交按钮 [英] React antd form disable submit button

问题描述

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

How could I disable form submit button using antd

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

Form validations work, but I need to visually disable form submit button when validation fails

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

This is a stackblitz url https://stackblitz.com/edit/react-ts-z5d6tr?file=Hello.tsx

推荐答案

我找到了一些优雅的方法来执行此操作

I found some elegant way to perform this

<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>

这篇关于React antd 表单禁用提交按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！