React输入框限制仅接受1-10单个数字失效问题求助

问题分析 #

现有代码的核心问题：

• handleKeyDown时机错误：keydown触发时新输入的字符还未加入输入框值，无法提前拦截非法输入。
• 未针对10这个唯一合法两位数字做特殊判断，导致11、12等非法两位数字可被输入。
• handleRatingChange误用filter方法，且直接修改原数组元素，不符合React状态不可变原则。

解决方案 #

以下是修正后的完整代码，实现仅允许输入1-10、拦截非法输入的需求：

<input
  type="number"
  step="1"
  min="1"
  max="10"
  value={skill.editedRating || skill.rating} 
  onChange={(e) => handleRatingChange(e, skill.skillId)}
  onKeyDown={(e) => handleKeyDown(e)}
  inputMode="numeric" // 移动端弹出纯数字键盘，优化体验
/>

const handleKeyDown = (event) => {
  const { key, target } = event;
  const currentValue = target.value;

  // 允许退格、删除、方向键等控制键，保证基础操作正常
  const allowedControlKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab'];
  if (allowedControlKeys.includes(key)) return;

  // 只允许输入0-9的数字字符
  if (!/^\d$/.test(key)) {
    event.preventDefault();
    return;
  }

  // 限制输入长度：仅当前值为"1"时，允许输入"0"（组成合法值10）
  if (currentValue.length > 0) {
    if (currentValue !== '1' || key !== '0') {
      event.preventDefault();
    }
  }
};

const handleRatingChange = (event, skillId) => {
  const newValue = event.target.value;
  // 最终验证：仅保留1-10范围内的合法值，非法值回退为原评分
  const validValue = Number(newValue) >= 1 && Number(newValue) <= 10 ? newValue : skill.rating;
  
  // 使用map创建新数组，遵循React状态不可变原则
  const updatedSkills = skills.map(skill => {
    if (skill.skillId === skillId) {
      return { ...skill, rating: validValue };
    }
    return skill;
  });
  setSkills(updatedSkills);
};

关键改进点 #

• handleKeyDown前置拦截：
  1. 放行必要控制键，不影响输入框基础操作。
  2. 直接拦截非数字字符，避免无效输入。
  3. 仅允许在输入"1"后输入"0"，杜绝其他非法两位数字。
• handleRatingChange最终校验：
  1. 用map生成新数组，避免直接修改原状态对象。
  2. 对输入值做最终合法性校验，确保状态中只存储1-10的有效值。
• 新增inputMode="numeric"，优化移动端输入体验。

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