云策 WordPress 开发者社区

块编辑器开发文档

BaseField

查看官方原文 ↗
💡 云策文档标注

概述

BaseField 是 WordPress 中的一个内部实验性组件，用于构建更复杂的字段组件（如 TextField），提供错误处理和焦点样式，但不处理布局。

关键要点

  • BaseField 是内部组件，未在 index.js 中导出，目前处于实验阶段，可能发生重大变更。
  • 它主要用于作为钩子（如 useBaseField）使用，而非直接作为组件，以简化字段开发。
  • 提供 disabled、hasError、isInline、isSubtle 等 props 来控制字段状态和样式。

代码示例

function useExampleField( props ) {
    const { as = 'input', ...baseProps } = useBaseField( props );

    const inputProps = {
        as,
        // more cool stuff here
    };

    return { inputProps, ...baseProps };
}

function ExampleField( props, forwardRef ) {
    const { preFix, affix, disabled, inputProps, ...baseProps } =
        useExampleField( props );

    return (
        <View { ...baseProps } disabled={ disabled }>
            { preFix }
            <View autocomplete="off" { ...inputProps } disabled={ disabled } />
            { affix }
        </View>
    );
}

注意事项

  • BaseField 是实验性功能，不建议在生产环境中使用，因为其 API 可能不稳定。
  • 它仅包装字段在 Flex 容器中，不处理组件布局，开发者需自行实现布局逻辑。
📄 原文内容
This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

BaseField is an internal (i.e., not exported in the index.js) primitive component used for building more complex fields like TextField. It provides error handling and focus styles for field components. It does not handle layout of the component aside from wrapping the field in a Flex wrapper.

Usage

BaseField is primarily used as a hook rather than a component:

function useExampleField( props ) {
    const { as = 'input', ...baseProps } = useBaseField( props );

    const inputProps = {
        as,
        // more cool stuff here
    };

    return { inputProps, ...baseProps };
}

function ExampleField( props, forwardRef ) {
    const { preFix, affix, disabled, inputProps, ...baseProps } =
        useExampleField( props );

    return (
        <View { ...baseProps } disabled={ disabled }>
            { preFix }
            <View autocomplete="off" { ...inputProps } disabled={ disabled } />
            { affix }
        </View>
    );
}

Props

disabled: boolean

Whether the field is disabled.

  • Required: No

hasError: boolean

Renders an error style around the component.

  • Required: No
  • Default: false

isInline: boolean

Renders a component that can be inlined in some text.

  • Required: No
  • Default: false

isSubtle: boolean

Renders a subtle variant of the component.

  • Required: No
  • Default: false