如何实现React受控Input输入自动转大写且输入时光标不跳转至末尾

这个需求完全可以实现，不存在React底层限制，核心问题是手动修改受控输入框的value后，浏览器默认会重置光标位置到末尾，只需要额外做一次光标位置的同步即可。

最简实现代码 #

你可以直接复用下面基于React Hooks的实现：

import { useRef, useState, useEffect } from 'react';

const UpperCaseInput = () => {
  const [stateValue, setStateValue] = useState('');
  // 存储输入框DOM引用
  const inputRef = useRef(null);
  // 存储输入时的光标位置
  const cursorPosRef = useRef(0);

  const onChangeHandler = event => {
    // 先记录当前输入的光标位置
    cursorPosRef.current = event.target.selectionStart;
    // 转大写后更新状态
    setStateValue(event.target.value.toUpperCase());
  };

  // 状态更新后同步光标位置
  useEffect(() => {
    if (inputRef.current) {
      // 将光标重置到之前记录的位置
      inputRef.current.selectionStart = cursorPosRef.current;
      inputRef.current.selectionEnd = cursorPosRef.current;
    }
  }, [stateValue]);

  return (
    <input
      ref={inputRef}
      type="text"
      onChange={onChangeHandler}
      value={stateValue}
    />
  );
};

实现逻辑说明 #

• 用inputRef获取输入框的原生DOM节点，用来操作光标属性
• 用cursorPosRef存储每次输入时的光标位置，用ref存储是因为不需要触发额外重渲染，仅作为临时缓存使用
• 触发onChange时先记录当前光标位置，再更新转大写后的状态值
• 状态更新后在useEffect中手动将光标位置设置为之前记录的值，由于转大写不会改变字符长度，因此不需要额外调整光标偏移量

轻量替代方案 #

如果你仅需要给用户展示大写效果，不需要实时获取大写的状态值，可以用更简单的CSS方案，完全不需要处理光标问题：
给input添加style={{textTransform: 'uppercase'}}，输入的内容会自动显示为大写，在提交数据的时候再将原始值转大写即可。

内容的提问来源于stack exchange，提问作者Ivan