跳到主要内容

结账工具

提供用于结账功能的实用函数和 React 钩子，这些功能来自 @woocommerce/blocks-checkout。

useValidateCheckout​

一个钩子，用于验证结账表单，并在发现任何错误时自动滚动到第一个验证错误。

此钩子主要由 PlaceOrderButton 组件内部使用，以向自定义的下单按钮组件提供 validate 属性。 但是，如果需要，也可以直接使用它。

使用方法​

// 别名导入
import { useValidateCheckout } from '@woocommerce/blocks-checkout';

// 全局导入
// const { useValidateCheckout } = wc.blocksCheckout;

const MyComponent = () => {
    const validateCheckout = useValidateCheckout();

    const handleClick = async () => {
        const { hasError } = await validateCheckout();

        if ( hasError ) {
            // 验证失败 - 错误会自动显示，
            // 并且页面会滚动到第一个错误元素
            return;
        }

        // 验证通过 - 继续执行您的逻辑
    };

    return <button onClick={ handleClick }>Validate</button>;
};

返回值​

该钩子返回一个函数，当调用该函数时：

  1. 触发 CHECKOUT_VALIDATION 事件以运行所有已注册的验证回调。
  2. 检查验证存储以查找任何字段级别的验证错误。
  3. 如果发现错误：
    • 显示所有验证错误。
    • 滚动到并聚焦第一个错误元素。
  4. 返回一个 promise，其结果为 { hasError: boolean }。
属性类型描述
hasErrorboolean如果验证失败则为 true，如果验证通过则为 false。