React中onChange事件e.preventDefault失效问题及修复咨询

核心问题点 #

1. 事件类型不匹配：项目中使用React.FormEvent<HTMLElement>作为事件类型，而input的change事件正确类型应该是React.ChangeEvent<HTMLInputElement>。FormEvent的preventDefault()对input输入行为的拦截效果有限，无法有效阻止非法内容写入输入框。
2. 未同步修正输入框显示：项目代码检测到非法字符时仅return，但用户输入的非法内容已经写入input的value属性，只是没更新组件状态，所以非法字符依然会显示在输入框中。
3. 定时器不是导致非法输入生效的直接原因，异步操作只会影响状态更新时机，不会直接让非法输入显示。

修复代码示例 #

修正事件类型，同时直接过滤非法内容并同步更新输入框和组件状态：

const onChangeMin = (e: React.ChangeEvent<HTMLInputElement>) => {
  clearTimeout(timeOut);
  const parent = e.target.closest('.aside-filters')!.getBoundingClientRect().top;
  const element = e.target.getBoundingClientRect().top;
  setShowButton(true);
  setTopButton(element - parent);

  timeOut = setTimeout(() => {
    setShowButton(false);
  }, 7000);

  // 过滤掉所有非数字、点、逗号的字符
  const filteredValue = e.target.value.replace(/[^0-9.,]/g, '');
  // 同步更新输入框的显示值
  e.target.value = filteredValue;
  // 更新组件状态，同时将逗号统一替换为点
  setMinValue(filteredValue.replace(',', '.'));
};

额外优化建议 #

• 限制最多一个小数点/逗号：可以追加正则处理，避免输入多个分隔符，比如filteredValue.replace(/^([0-9]*[.,]?)[.,]/g, '$1')。
• 结合onKeyDown增强拦截：如果需要实时阻止非法按键输入，可以在onKeyDown事件中判断按键类型并阻止，但onChange过滤的方式兼容性更好，能覆盖粘贴、输入法输入等场景。

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