React: как правильно нормализовать положение курсора в инпуте?

Question

[Леша Федосеев]

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

Первая итерация: jsfiddle.net/0cnnyy74

Если вводить «точку» в конце строки, то всё ок. Но если сделать стрелочкой на клавиатуре ← ← и поставить «точку» в серединке, то она конечно превратится в «восклицательный знак», но каретка отскочит в конец. Мне так не надо)

Решаю я это второй итерацией: jsfiddle.net/ruc56bbv

Внимание, вопрос: вторая итерация — это React-way? Или можно как-то элегантней внутри компонента это исполнить?

Answer 1

[KnightForce]

Если тебе просто нужно заменить все точки на восклицательном при вводе/изменении input, то:

onChange(e) {
    e.target.value=e.target.value.replace(/\./g, "!");//Регулярное выражение, которое заменит все точки
}