Как правильно декорировать текст в поле input, используя хуки React?

Question

[Snelsi]

Допустим, есть дизайн вот такого поля ввода

Обычно мы бы просто использовали input value c хуком useState:

let { value, setValue } = useState("");
const handleChange = (e) => { setValue(e.target.value);  }
<input value={value} onChange={handleChange} />

Но в дизайне к введённому пользователем значению добавляются декоративные пробелы и приставка. Как правильно сверстать такой input?

Comments

[Mikhail Osher]

Посмотрите реализации каких-нибудь "react input mask". Там вагон работы надо сделать. Особенно, работа с курсором / selection, когда происходит форматирование.

[Snelsi]

Mikhail Osher, Это было первое, что я сделал, но большинство масок направлены на немного другую проблему (валидацию ввода), а проделывать вагон работы очень бы не хотелось. В идеале, может, можно бы было как-то хитро использывать .toLocaleString() и contenteditable div, используя псевдокласс для отображения приставки.

[Виктор Янышев]

После каждого символа вставить пробел, в чем проблема? Дернуть нужную функцию на событие change или input?

[Snelsi]

Виктор Янышев, Ни слова не понял, давайте пример.

[Snelsi]

Есть простой вариант нативного декорирования, но неясно как это соединить с вводом.

var n = 102420;
console.log(n.toLocaleString('ru-Ru').concat(' км'));
// 102 420 км

[Виктор Янышев]

Snelsi, если в строке больше 3 символов, разделить строку по три символа, склеить разделённую строев пробелом, а последним элементом добавить меру. И это не декорирование а формат.

[Snelsi]

Виктор Янышев, комментарием выше уже есть код, который делает ровно это же. Вопрос вообще не про формат строки, а про то как интегрировать форматирование строки в input, не ломая ввод и не модифицируя оригинальное значение value.

[Виктор Янышев]

Snelsi, формат/форматирование строки на лицо. Необходимость модификации строки то же на лицо, но не обязательно её изменять в data, а только для установки в value.

input onInput={eventInputHandler}

// Либо ваш вариант console.log(n.toLocaleString('ru-Ru').concat(' км'));
eventInputHandler(e) => {
 if(this.value.length > 3) {
   let value = this.value.split('');
   return this.value.substr(0, 3) + ' ' + this.value.substr(3) + 'км';
 }
}

[Snelsi]

Виктор Янышев, либо вы не понимаете сути вопроса, либо не знаете как работают формы реакт.