Компонент BaseField в WordPress: Полное руководство с примерами

Главная - WordPress Codex - Компонент BaseField в WordPress: Полное руководство с примерами
Доступна с версии: 5.0
Раздел: Gutenberg
Написал: Александр Сокирка

Компонент BaseField в WordPress используется как базовый элемент для создания более сложных полей, таких как TextField. Он обеспечивает стили отображения ошибок и фокусировки для полей ввода, но сам по себе не задает макет компонента. Компонент BaseField оборачивает поле во Flex-контейнер и предоставляет дополнительные возможности для управления состоянием поля.

Обратите внимание, что BaseField является экспериментальным компонентом и может быть подвержен изменениям в будущем. В большинстве случаев его используют как хук.

Основное назначение компонента BaseField

BaseField служит для унифицированного отображения и обработки состояний полей, таких как ошибка и отключение. Его можно использовать как обертку для создания полей с индивидуальными стилями и поведением, необходимыми для более сложных интерфейсов.

Использование BaseField в виде хука

Обычно BaseField используется в качестве хука, что позволяет применять его стили и обработчики к другим компонентам. В приведенном ниже примере показано, как можно создать собственное поле, используя useBaseField.

import { useBaseField } from '@wordpress/components';

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

    const inputProps = {
        as,
        autoComplete: 'off',
        ...baseProps,
    };

    return { inputProps, ...baseProps };
}

function CustomField(props) {
    const { prefix, suffix, disabled, inputProps, ...baseProps } = useCustomField(props);

    return (
        <div {...baseProps} disabled={disabled}>
            {prefix}
            <input {...inputProps} disabled={disabled} />
            {suffix}
        </div>
    );
}

Пояснение к примеру

  • useCustomField: Создается хук, который использует useBaseField для управления стилями и состояниями. Мы определяем inputProps, которые передаются в поле.
  • CustomField: Этот компонент использует свойства prefix и suffix для добавления элементов перед и после поля ввода. Также применяется disabled, чтобы управлять состоянием поля.

Свойства (Props) компонента BaseField

Компонент BaseField поддерживает несколько параметров, которые позволяют управлять его состоянием и отображением.

1. disabled

Тип: boolean
Описание: Определяет, будет ли поле отключено. При true поле становится неактивным и стилизуется соответствующим образом.

<CustomField 
    disabled={true}
    prefix="От:"
    suffix="руб."
/>

В этом примере поле CustomField будет отключено и недоступно для редактирования.

2. hasError

Тип: boolean
Описание: Устанавливает стиль ошибки вокруг компонента. Если свойство установлено в true, поле будет отображаться с красной рамкой или другим стилем, сигнализирующим об ошибке.

<CustomField 
    hasError={true}
    prefix="От:"
    suffix="руб."
/>

Поле CustomField будет отображаться с ошибочным стилем, показывая пользователю, что требуется исправление.

3. isInline

Тип: boolean
Описание: Определяет, будет ли компонент отображаться встроенно в текст. Полезно для создания элементов, которые отображаются внутри абзацев текста.

<CustomField 
    isInline={true}
    prefix="Цена:"
    suffix="руб."
/>

Поле CustomField будет отображаться встроенно в текст, что удобно для вставки элементов ввода данных непосредственно в абзацы.

4. isSubtle

Тип: boolean
Описание: Устанавливает стиль компонента, отображая его в более «мягком» варианте. Поле будет выглядеть менее заметным, что подходит для второстепенных или необязательных элементов.

<CustomField 
    isSubtle={true}
    prefix="Минимум:"
    suffix="ед."
/>

В этом примере поле будет отображаться с более мягким стилем, не привлекая основного внимания пользователя.

Полный пример использования BaseField в создании кастомного поля

Следующий пример демонстрирует, как создать кастомное поле с использованием всех параметров BaseField. Поле включает префикс и суффикс, отображение ошибки и установку в состояние disabled.

import { useBaseField } from '@wordpress/components';

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

    const inputProps = {
        as,
        autoComplete: 'off',
        style: { borderColor: baseProps.hasError ? 'red' : 'black' },
        ...baseProps,
    };

    return { inputProps, ...baseProps };
}

function EnhancedField({ prefix, suffix, disabled, hasError, isInline, isSubtle }) {
    const { inputProps, ...baseProps } = useEnhancedField({
        disabled,
        hasError,
        isInline,
        isSubtle,
    });

    return (
        <div style={{ display: isInline ? 'inline-flex' : 'flex', opacity: isSubtle ? 0.7 : 1 }}>
            {prefix && <span>{prefix}</span>}
            <input {...inputProps} disabled={disabled} />
            {suffix && <span>{suffix}</span>}
        </div>
    );
}

// Использование кастомного компонента EnhancedField
function ExampleForm() {
    return (
        <div>
            <EnhancedField 
                prefix="Стоимость:"
                suffix="₽"
                disabled={false}
                hasError={false}
                isInline={true}
                isSubtle={false}
            />
            <EnhancedField 
                prefix="Доставка:"
                suffix="₽"
                disabled={true}
                hasError={true}
                isInline={false}
                isSubtle={true}
            />
        </div>
    );
}

Пояснение к полному примеру

  • EnhancedField используется для создания поля ввода с использованием всех поддерживаемых свойств BaseField.
  • В поле с hasError={true} используется стиль ошибки с красной рамкой.
  • Поле с isSubtle={true} отображается с пониженной непрозрачностью, делая его менее заметным.
  • isInline позволяет отображать поле встроенным в текст, что полезно для интерфейсов с ограниченным пространством.

Заключение

Компонент BaseField — это мощный инструмент для создания кастомных полей ввода в WordPress. Он обеспечивает базовые стили и обработку состояний, таких как ошибка и отключение, что упрощает создание более сложных и функциональных элементов пользовательского интерфейса.

Стартовая премиум тема для WordPress
Демо импорт тестового контента в 1 клик.
SEO оптимизированный и валидный код.
Множество готовых стартовых сайтов.
Лучшая документация и поддержка.
Опции персонализации контента.
Креативный и современный дизайн.
Тема для WordPress

Дополнительно по: Gutenberg