时间戳

首页 > 解决方案 > 在 React Input 中，如何将输入的每个字母转换为大写字母，但是您可以在中间输入而光标不会在每次按键时跳到结尾？

reactjs - 在 React Input 中，如何将输入的每个字母转换为大写字母，但是您可以在中间输入而光标不会在每次按键时跳到结尾？

问题描述

我见过很多问题，但没有真正奏效的解决方案。我有一个反应输入：

<input
  type="text"
  onChange={onChangeHandler}
  value={value}
/>

和一个 onChange 处理程序：

const onChangeHandler = event => {
  setStateValue(event.target.value.toUpperCase());
}

嘿，它可以使我输入 CAPS 的所有内容，但是如果我要单击输入的中间以尝试在中间输入，在按一下键后，它会将光标跳到末尾，这真的很烦人.

我正在使用钩子。

我想要的甚至是可行的，还是我们只是被 React 和它的工作方式锁在了一个角落里？

我见过一些极其冗长和复杂的解决方案，以及尝试跟踪光标和恢复位置，但我无法让它工作。

这应该是一件简单的事情，但从我读过的内容来看，似乎 FB 已经锁定了他们的预期行为，并且在简单地完成这项工作方面并不灵活。

标签： reactjs

解决方案

Please replace onChangeHandler() with:

  const onChangeHandler = e => {
    var start = e.target.selectionStart;
    var end = e.target.selectionEnd;
    e.target.value = e.target.value.toUpperCase();
    e.target.setSelectionRange(start, end);
    setStateValue(e.target.value.toUpperCase());
  };

推荐阅读