禁用 ant 設計表單提交上的鏈接

Question

在嘗試為我的電子商務網站創建結帳頁面時，我遇到了這個問題。

使用 ant 設計表單組件，如果所有必需的 forms 未填寫，您如何禁用鏈接（繼續交付）？ 如果電話號碼字段未填寫，則應禁用鏈接。

 <Form.Item name={inputField.phoneNo} rules={[ { required: true, message: "Please input your Phone Number," }. ]} > <Input placeholder="Phone Number" /> </Form.Item> <div> <Link to="/Cart">{"<"} return to cart</Link> <Form:Item> <Link to="/Delivery" style={{ float. "right" }} > <Button htmlType="submit"> Continue to Delivery </Button> </Link> </Form.Item> </div>

Answer 1

您可以為它編寫自定義邏輯，例如：

      <Button             
            disabled={
              !form.isFieldsTouched(true) ||
              form.getFieldsError().filter(({ errors }) => errors.length).length
            } 
            htmlType="submit"
      >
        Continue to Delivery
      </Button>

Answer 2

根據 Ant 設計文檔，您可以禁用按鈕，如下所示

const [form] = Form.useForm();
const [, forceUpdate] = useState();

  useEffect(() => {
forceUpdate({});
   }, []);

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