如何使用按钮道具动态禁用antd modal的按钮

Question

我有一个 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>

Answer 1

您可以使用onFieldsChange从Antd形式API与togehtergeFieldsError和okButtonProps从Antd模态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)
          )
        }
      >

这是一个有效的Stackblitz。