react:antd中Input 或 InputNumber 数字类型禁用鼠标滚动时值自动变化解决方案

react:antd中Input 或 InputNumber 数字类型禁用鼠标滚动时值自动变化解决方案

记录antd版本:v4

这是一个很隐蔽的bug,仅输入框聚焦后鼠标滑动经过输入框时,输入框的值会自动加减。不聚焦、不经过输入框不显示。

解决方案:

  1. 不使用 Input 组件设置 type="number",改用 InputNumber
  2. InputNumber 组件时,一定不要设置:type="number"

经测试,antd的 Input组件不允许自定义配置。自带api又不能解决。可以考虑使用 h5 原生 input。


其他:

  • 禁用 原生 input 在数字框的上下剪头:
javascript 复制代码
<style>
    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance:textfield;
    }    
    input[type="number"]{
        -moz-appearance:textfield;
    }
</style>
  • react 禁止事件冒泡
javascript 复制代码
e => {
	e.preventDefault();
	e.stopPropagation();
}
相关推荐
IT_陈寒20 分钟前
SpringBoot启动慢得像蜗牛?原来是这个配置在捣鬼
前端·人工智能·后端
计算机魔术师21 分钟前
Muse Spark跑赢Gemini,但真正的底牌是这种设计
前端
PYB334 分钟前
【Web·JS·基础】函数的使用和展运算符...objs
前端·javascript
指针向南44 分钟前
Chrome读不了HEIC怎么办:原生解码和WASM两条路
前端·图像处理·人工智能·chrome·计算机视觉·wasm
默_笙1 小时前
🚥 给 RAG 装一台心电监护仪:LangSmith 全链路观测(上)
前端·javascript
前端snow2 小时前
ai agent --- mem0 外挂记忆系统
前端
变与不变8063 小时前
js同步和异步难点重点详解
开发语言·javascript·ecmascript
特立独行的猫a3 小时前
用仓颉写一个 Tauri:IPC 的每次往返实现原理(web层到仓颉层的触发过程)
前端·ui·harmonyos·tauri·鸿蒙·仓颉
Dovis(誓平步青云)3 小时前
多个链接不等于多份证据,新闻核验看板怎样合并来源
java·服务器·前端·javascript·人工智能·pdf·电脑
骑着蜗牛撵大象3274 小时前
Qt 事件机制详解:从 QEvent 派生类到事件过滤器的全景指南
前端·python