Компонент TextareaControl из библиотеки компонентов WordPress позволяет пользователям вводить многострочный текст, автоматически перенося строки и прокручивая содержимое, если оно превышает высоту поля. В этой статье подробно рассмотрим основные принципы работы, параметры компонента и примеры его использования.
Основные концепции TextareaControl
TextareaControl используется для ввода длинного текста, который требует нескольких строк. В отличие от TextControl, который подходит для краткого ввода в одну строку, TextareaControl лучше справляется с более длинными текстами и имеет фиксированную высоту.
Когда использовать TextareaControl
- Используйте
TextareaControl, если необходимо получить от пользователя развёрнутый ответ, превышающий одну строку. - Поле должно визуально выделяться и указывать на возможность ввода.
- Следует обеспечить чёткое разделение активных и неактивных состояний, а также отображать сообщения об ошибках в случае некорректного ввода.
Когда не использовать TextareaControl
- Не используйте
TextareaControlдля коротких ответов, таких как телефонные номера или имена. Для этих случаев лучше подойдётTextControl.
Анатомия TextareaControl
Каждое поле TextareaControl включает:
- Контейнер — визуально выделяет область ввода.
- Метка — поясняет, какие данные следует вводить.
- Сообщение об ошибке — появляется, если введённые данные не соответствуют требованиям.
Пример использования TextareaControl
Создадим базовый пример компонента TextareaControl, где пользователь может ввести отзыв о продукте.
import { useState } from 'react';
import { TextareaControl } from '@wordpress/components';
const ProductFeedback = () => {
const [feedback, setFeedback] = useState('');
return (
<TextareaControl
label="Ваш отзыв о продукте"
help="Напишите свой отзыв о продукте, он поможет другим покупателям."
value={feedback}
onChange={(value) => setFeedback(value)}
rows={5}
className="product-feedback-input"
__nextHasNoMarginBottom
/>
);
};
Пояснение к примеру
- label — метка «Ваш отзыв о продукте» объясняет, что ожидается от пользователя.
- help — текст помощи «Напишите свой отзыв о продукте, он поможет другим покупателям» уточняет назначение поля.
- value — текущее значение, вводимое пользователем, обновляется через
onChange. - rows — задаёт высоту поля ввода в 5 строк.
- __nextHasNoMarginBottom — убирает нижний отступ, адаптируя компонент под новые стили.
Полный список параметров компонента TextareaControl
Свойства (Props)
- help
Описание: Дополнительный текст, отображаемый под полем ввода, служит для пояснения назначения поля. Может принимать строку или React-элемент для гибкости.
Тип:string | Element
Обязательный: Нет - hideLabelFromVision
Описание: Если установлено вtrue, метка будет видна только пользователям экранных читалок, а не всем пользователям. Полезно для улучшения доступности.
Тип:boolean
Обязательный: Нет - label
Описание: Текст, отображаемый в качестве метки над полем ввода. Метка должна чётко объяснять, какие данные необходимы.
Тип:string
Обязательный: Нет - onChange
Описание: Функция обратного вызова, вызываемая каждый раз при изменении значения в поле ввода. Получает новое значение поля, что позволяет обновлять состояние компонента или выполнять другие действия.
Тип:(value: string) => void
Обязательный: Да - rows
Описание: Задаёт количество строк в полеTextareaControl, определяя его высоту. Чем больше строк указано, тем выше будет поле по умолчанию.
Тип:number
Обязательный: Нет
Значение по умолчанию:4 - value
Описание: Текущее значение поля ввода. Это значение отображается внутриTextareaControlи обновляется функциейonChange.
Тип:string
Обязательный: Да - __nextHasNoMarginBottom
Описание: Экспериментальный параметр, убирающий нижний отступ у компонента. Может стать стандартным в будущем, улучшая интеграцию со стилями.
Тип:boolean
Обязательный: Нет
Значение по умолчанию:false
Пример с коротким многострочным ответом
Этот пример показывает, как можно использовать TextareaControl для ввода краткого ответа, при этом визуально адаптируя поле под маленький размер.
import { useState } from 'react';
import { TextareaControl } from '@wordpress/components';
const ShortAnswerTextarea = () => {
const [shortAnswer, setShortAnswer] = useState('');
return (
<TextareaControl
label="Краткий ответ"
help="Оставьте краткий комментарий (не более 50 слов)."
value={shortAnswer}
onChange={(value) => setShortAnswer(value)}
rows={2}
className="short-answer-input"
/>
);
};
Пояснение
- rows — значение
2задаёт минимальную высоту, подходящую для кратких ответов. - className — уникальный CSS-класс
short-answer-inputдля стилизации.
Пример использования скрытой метки
Иногда может быть полезно скрыть метку визуально, сохранив её доступной для экранных читалок.
import { useState } from 'react';
import { TextareaControl } from '@wordpress/components';
const ScreenReaderLabelTextarea = () => {
const [description, setDescription] = useState('');
return (
<TextareaControl
label="Описание задачи"
hideLabelFromVision
help="Введите описание задачи для внутреннего использования."
value={description}
onChange={(value) => setDescription(value)}
rows={6}
className="task-description-input"
/>
);
};
Пояснение
- hideLabelFromVision — скрывает метку от визуальных пользователей, оставляя её доступной для экранных читалок.
- rows — значение
6обеспечивает достаточную высоту для подробного описания задачи.
Заключение
Компонент TextareaControl в WordPress предоставляет разработчикам удобное средство для создания полей ввода текста, адаптированных для длинных ответов.