React Cursor прыгает при форматировании текстового поля

Question

Я знаю, что есть много тем по этому поводу, и я хорошо изучил и реализовал их решения, но я просто не могу заставить его работать должным образом

Я пытаюсь отформатировать номер телефона, чтобы что он отображается в определенном формате.

Я создал демонстрацию того, как это работает в моем приложении. https://codesandbox.io/s/dank-leaf-94s3w?file= / src / App. js

Изменить: извините, чтобы описать проблему подробнее.

все работает нормально, когда вы просто набираете # спереди назад

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

Спасибо

Answer 1

Привет, проблема в том, что вы передаете новое значение, и это будет похоже на ввод всего значения. И это приведет к тому, что курсор переместится в конец.

Вы можете преодолеть это, запросив кадр анимации окна и переместив курсор обратно туда, где он был:

const caret = target.selectionStart;
    const element = target;
    window.requestAnimationFrame(() => {
      element.selectionStart = caret;
      element.selectionEnd = caret;
    });

Вот копия вашей песочницы .

Answer 2

Вы передаете ссылку не в тот элемент. В @material-ui/core/TextField вы должны передать ссылку на inputProps вместо прямой ссылки.

Просто измените:

ref={input}

на:

inputProps={{ ref: input }}

В вашем коде есть и другие проблемы, такие как отсутствие синтаксического анализа значения до нормального состояния строки, но проблема с переходом была для ref