Editable

Editable — текст, который правится по двойному клику на месте. До двойного клика это обычный текст: его можно выделить и скопировать, поле ввода появляется только на время правки. Значение — контролируемая модель, но с задержкой: набранное живёт внутри компонента, а наружу уходит одним onValueCommit — по Enter или клику мимо; Esc отменяет правку. Пока поле не редактируют, внешний value побеждает — свежие данные с сервера доезжают до превью сами. Типографику компонент наследует от родителя: он встраивается в чужой текст (заголовок ячейки, абзац описания), а не стоит отдельным полем, как Input и Textarea.

Починить вход по ссылке

Анатомия

Editable

Примеры

Многострочный текст

multiline меняет поле ввода на textarea (стартовая высота — rows, дальше тянется за уголок), а превью — на текст с сохранением переводов строк. Enter при этом вставляет новую строку, а сохраняет Ctrl+Enter (Cmd+Enter на macOS) или клик мимо.

Ссылка из письма ведёт на форму входа, но сессия не поднимается.

Пустое значение

При пустом значении превью показывает placeholder цветом подписи — иначе редактировать было бы нечего: пустой текст не поймать двойным кликом. Формулируйте его действием («Добавить описание»), а не названием поля.

Добавить описание

API

PropTypeDefault
value*

Текущее значение (источник правды — снаружи)

string-
onValueCommit*

Значение подтверждено: Enter (Ctrl/Cmd+Enter в multiline) или клик мимо

(value: string) => void-
placeholder

Текст превью, когда значение пустое

string-
multiline

Многострочный ввод: редактор — textarea, превью переносит строки

boolean-
rows

Стартовая высота textarea в строках (только с multiline)

number-
disabled

Значение только для чтения — двойной клик не включает редактирование

boolean-