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();
}
相关推荐
这可不简单几秒前
前端性能优化:从浏览器渲染原理到实战(告别 “知其然不知其所以然”)
前端·css·面试
前端开发爱好者6 分钟前
尤雨溪宣布:Vite 纪录片震撼发布!
前端·javascript·vue.js
北城以北888816 分钟前
ES6(二)
前端·javascript·es6
朕的剑还未配妥30 分钟前
移动端触摸事件与鼠标事件的触发机制详解
前端
墨鱼鱼34 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
渣哥34 分钟前
多环境配置利器:@Profile 在 Spring 项目中的实战价值
javascript·后端·面试
携欢37 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉3301 小时前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦1 小时前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
U.2 SSD1 小时前
Echart仪表盘示例
javascript·echarts