React: how to properly normalize cursor position in input?

Question

JavaScript

There is a regular text input in which you need to replace the “dot” with an “exclamation mark” after each change.
First iteration: jsfiddle.net/0cnnyy74
If you enter a "dot" at the end of the line, then everything is ok. But if you make an arrow on the keyboard ← ← and put a “dot” in the middle, then of course it will turn into an “exclamation mark”, but the caret will bounce to the end. I don’t need to) I solve
it with the second iteration: jsfiddle.net/ruc56bbv
Attention, the question is: the second iteration is React-way? Or is it possible to do this in a more elegant way inside the component?

Answer 1

If you just need to replace all dots with an exclamation point when typing/changing input, then:

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