React中如何限制用户输入的数字不超过10位？现有实现存在问题

• 第一个版本的缺陷：判断逻辑基于state中已存储的旧值长度，只要长度>=10就直接阻止所有输入事件，退格、删除等修改操作也属于输入事件范畴，因此会被全部拦截，无法修改内容。
• 第二个版本的缺陷：e.currentTarget.value.replace("")属于语法使用错误，该写法不能实现截取长度的效果，反而会导致输入内容被清空。

核心逻辑是不对输入事件做拦截，而是直接对用户输入的新值做裁剪处理，无论用户执行输入、删除、修改操作，都最多保留前10位：

numberChangeHandler = (e) => {
  const userInput = {...this.state.userInput};
  // 可选：过滤非数字字符，仅保留数字，不需要纯数字限制可删除该行
  const pureNumberValue = e.currentTarget.value.replace(/\D/g, '');
  // 截取前10位字符
  const finalValue = pureNumberValue.slice(0, 10);
  userInput[e.currentTarget.name] = finalValue;
  this.setState({userInput});
}

如果你的输入框使用type="text"类型，不需要额外写JS逻辑，直接给input标签添加原生属性maxLength={10}即可实现长度限制；但如果使用type="number"类型输入框，原生maxLength属性不生效，需使用上述JS处理方案。

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