格式化文本字段时反应光标跳跃答案

【问题标题】：React Cursor jumping when formatting textfield格式化文本字段时反应光标跳跃
【发布时间】：2020-06-17 16:00:46
【问题描述】：

我知道有很多关于这方面的主题，我已经尽力阅读和实施他们的解决方案，但我就是无法让它正常工作

我正在尝试格式化电话号码，以便它以某种格式显示。

我创建了一个演示它如何在我的应用中工作。 https://codesandbox.io/s/dank-leaf-94s3w?file=/src/App.js

编辑：抱歉再描述一下这个问题。

当您只是从前到后输入 # 时，一切正常

但是当我尝试修改中间数字时，每次输入后光标都会跳到末尾。

谢谢

【问题讨论】：

我想你可以稍微描述一下“跳跃光标”是如何发生的吗？

标签： javascript reactjs react-hooks cursor-position

【解决方案1】：

您好，问题是您传递了一个新值，这就像输入整个值一样。这将导致光标移动到末尾。

您可以通过请求窗口动画帧并将光标移回原来的位置来克服它：

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

这是您的sandbox 的副本。

【讨论】：

谢谢！似乎它正在工作。我昨天花了 1/2 的时间试图解决这个问题 -_-
其实有个小bug，如果你一开始就没有输入，每次加“)”或者“-”，光标就会落到错误的位置，而不是像以前那样在最后，只是1 后面，似乎没有考虑添加的额外字符？

【解决方案2】：

您将 ref 传递给错误的元素。在@material-ui/core/TextField 中，您必须将引用传递给inputProps，而不是直接引用。

只需更改：

ref={input}

到：

inputProps={{ ref: input }}

您的代码中还有其他问题，例如没有将值解析为正常的字符串状态，但跳转的问题是ref

【讨论】：

谢谢，这似乎可行，但我注意到当添加“)”或“-”时，光标仍会出现在错误的位置。解决此问题的最佳方法是什么？我的第一个想法是使用 If 语句来检查“）”的位置并移动光标更多？