React受控输入在Chrome撤销/重做时突破maxLength属性限制

问题本质 #

这是Chromium内核浏览器（Chrome/Edge）与React受控组件的交互兼容性问题，并非你的代码逻辑错误，但可以通过代码修复来规避。

原因在于：React受控组件通过state完全控制输入框的值，而Chromium的撤销/重做操作会直接修改输入框的DOM值，绕过了常规的onChange事件触发流程，导致React的state没有及时同步并截断超出maxLength的内容，最终出现DOM值与state不一致、内容超出限制的情况。Firefox的撤销/重做机制会正确触发React的相关事件，因此不存在这个问题。

修复方案 #

你需要在React层面手动确保值的长度不超过限制，而不是仅依赖原生的maxLength属性。以下是两种可靠的修复方式：

方案1：在onChange中直接截断 #

修改值处理逻辑，转大写的同时手动截断到指定长度：

export default function App() {
  const [value, setValue] = useState("");

  const onValueChange = (e) => {
    const upperCaseValue = e.target.value.toUpperCase();
    // 手动截断到5个字符，确保state始终符合限制
    setValue(upperCaseValue.slice(0, 5));
  };

  return (
    <div className="App">
      <h1>Text Field uppercase</h1>
      <input
        type="text"
        id="input"
        value={value}
        maxLength="5"
        onChange={onValueChange}
      />
    </div>
  );
}

方案2：用useEffect兜底校验 #

如果担心某些极端场景下onChange未触发，可以添加useEffect监听值变化，兜底截断：

import { useState, useEffect } from "react";

export default function App() {
  const [value, setValue] = useState("");

  const onValueChange = (e) => {
    setValue(e.target.value.toUpperCase());
  };

  useEffect(() => {
    // 当值长度超过5时，强制截断
    if (value.length > 5) {
      setValue(value.slice(0, 5));
    }
  }, [value]);

  return (
    <div className="App">
      <h1>Text Field uppercase</h1>
      <input
        type="text"
        id="input"
        value={value}
        maxLength="5"
        onChange={onValueChange}
      />
    </div>
  );
}

说明 #

原生maxLength属性在非受控组件中可以正常生效，但在React受控组件场景下，由于值完全由state驱动，必须在React层面主动维护值的合法性，才能覆盖所有操作场景（包括浏览器的撤销/重做这种特殊操作）。

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