Editable
Editable — текст, который правится по двойному клику на месте. До двойного клика это обычный текст: его можно выделить и скопировать, поле ввода появляется только на время правки. Значение — контролируемая модель, но с задержкой: набранное живёт внутри компонента, а наружу уходит одним onValueCommit — по Enter или клику мимо; Esc отменяет правку. Пока поле не редактируют, внешний value побеждает — свежие данные с сервера доезжают до превью сами. Типографику компонент наследует от родителя: он встраивается в чужой текст (заголовок ячейки, абзац описания), а не стоит отдельным полем, как Input и Textarea.
Анатомия
Примеры
Многострочный текст
multiline меняет поле ввода на textarea (стартовая высота — rows, дальше тянется за уголок), а превью — на текст с сохранением переводов строк. Enter при этом вставляет новую строку, а сохраняет Ctrl+Enter (Cmd+Enter на macOS) или клик мимо.
Пустое значение
При пустом значении превью показывает placeholder цветом подписи — иначе редактировать было бы нечего: пустой текст не поймать двойным кликом. Формулируйте его действием («Добавить описание»), а не названием поля.
API
| Prop | Type | Default |
|---|---|---|
value*Текущее значение (источник правды — снаружи) | string | - |
onValueCommit*Значение подтверждено: Enter (Ctrl/Cmd+Enter в multiline) или клик мимо | (value: string) => void | - |
placeholderТекст превью, когда значение пустое | string | - |
multilineМногострочный ввод: редактор — textarea, превью переносит строки | boolean | - |
rowsСтартовая высота textarea в строках (только с multiline) | number | - |
disabledЗначение только для чтения — двойной клик не включает редактирование | boolean | - |