如何使用button props动态禁用antd modal的按钮

我有一个 antd Modal，我正在尝试验证一个字段并为其提供验证。如何根据验证启用/禁用“确定”按钮。如果验证成功，则应启用按钮，否则应禁用按钮。

<Form>
    <Modal
      title={modalHeader}
      okText="ADD FIELD"
      cancelText="CANCEL"
      visible={visible}
      onCancel={onCancelHandler}
      onOk={() => onAddFieldHandler(fieldName)}
      width={600}
      okButtonProps={{disabled:true}}
    >
      <p>Please provide name</p>
      <Form.Item
      name="fieldName"
      rules={[{ required: true, message: 'Please enter name' }]}
      >
      <FieldNameInput
        placeholder="Field name..."
        value={fieldName}
        onChange={(event) => setFieldName(event.target.value)}

      />
      </Form.Item>
    </Modal>
    </Form>

您可以使用onFieldsChange来自蚂蚁金服表单API https://ant.design/components/form/#Form和...一起geFieldsError和okButtonProps from Antd 模态 API https://ant.design/components/modal/#API.

  const [form] = Form.useForm();
  const [buttonDisabled, setButtonDisabled] = useState(true);
  return (
    <Modal
      ...
      okButtonProps={{ disabled:  buttonDisabled  }}
    >
     <Form
        form={form}
        ...
        onFieldsChange={() =>
          setButtonDisabled(
            form.getFieldsError().some((field) => field.errors.length > 0)
          )
        }
      >

这是一个工作斯塔克闪电战 https://codesandbox.io/s/prod-shape-zyyow?file=/index.js.