TextareaAutosize для textarea

TextareaAutosize — это специализированный компонент библиотеки MUI, предназначенный для создания <textarea> с автоматическим изменением высоты в зависимости от содержимого. Он является частью пакета @mui/material и обеспечивает более гибкую и удобную работу с текстовыми полями, чем стандартный HTML <textarea>.

Импорт и базовое использование

Для использования компонента необходимо импортировать его из @mui/material:

import TextareaAutosize from '@mui/material/TextareaAutosize';

Простейший пример:

<TextareaAutosize
  minRows={3}
  placeholder="Введите текст..."
/>

Пояснения:

  • minRows — минимальное количество строк, которые будет занимать поле.
  • placeholder — отображаемый текст, когда поле пустое.

Если не указан maxRows, высота поля будет увеличиваться без ограничения по мере ввода текста.

Основные свойства

Размер и ограничение

  • minRows: минимальное количество строк. Поле никогда не будет меньше этой высоты.
  • maxRows: максимальное количество строк. После достижения maxRows появляется вертикальная прокрутка.
  • style: позволяет задавать кастомные стили, включая width, padding, fontSize и border.

Пример:

<TextareaAutosize
  minRows={2}
  maxRows={5}
  style={{ width: 400, fontSize: 16, padding: 10 }}
  placeholder="Многострочный текст"
/>

Обработка событий

TextareaAutosize поддерживает все стандартные события HTML <textarea>, включая:

  • onChange — вызывается при изменении текста.
  • onFocus и onBlur — для обработки фокуса и ухода с поля.
  • onKeyDown, onKeyUp — для перехвата нажатий клавиш.

Пример с onChange:

const [text, setText] = React.useState('');

<TextareaAutosize
  minRows={3}
  value={text}
  onCha nge={(e) => setText(e.target.value)}
/>

Управление размерами через CSS

Хотя TextareaAutosize автоматически регулирует высоту, иногда нужно контролировать максимальную ширину или внешний вид с помощью CSS. Можно использовать sx или style:

<TextareaAutosize
  minRows={3}
  maxRows={6}
  sx={{
    width: '100%',
    borderRadius: 2,
    borderColor: 'grey.400',
    padding: 1,
    fontSize: '1rem'
  }}
/>
  • sx поддерживает систему тем MUI.
  • В style можно указать любые стандартные CSS-свойства.

Контроль через рефы

TextareaAutosize можно использовать с ref для прямого доступа к DOM-элементу, что полезно для фокусировки или измерения высоты:

const textareaRef = React.useRef(null);

const focusTextarea = () => {
  textareaRef.current.focus();
};

<TextareaAutosize
  ref={textareaRef}
  minRows={3}
/>

<button onCl ick={focusTextarea}>Фокус на поле</button>

Особенности и рекомендации

  1. Автоматическая высота: компонент сам вычисляет высоту на основе содержимого. Это избавляет от необходимости писать кастомные скрипты для динамической подгонки.
  2. Совместимость с формами: TextareaAutosize можно использовать в составе форм MUI вместе с FormControl, FormHelperText и InputLabel.
  3. Производительность: при больших объемах текста может потребоваться оптимизация рендеринга, особенно если компонент обновляется часто.
  4. Стилизация: для кастомных стилей предпочтительно использовать sx, так как он интегрирован с темой MUI и поддерживает responsive-правила.

Интеграция с другими компонентами MUI

TextareaAutosize часто комбинируют с:

  • FormControl для управления состоянием и валидацией.
  • InputLabel для подписей полей.
  • FormHelperText для вывода ошибок или подсказок.

Пример:

<FormControl fullWidth>
  <InputLabel shrink htmlFor="autosize-textarea">
    Комментарий
  </InputLabel>
  <TextareaAutosize
    id="autosize-textarea"
    minRows={4}
    maxRows={10}
    placeholder="Напишите отзыв..."
    style={{ padding: 10, fontSize: 16 }}
  />
  <FormHelperText>Максимум 500 символов</FormHelperText>
</FormControl>

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

Оглавление