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();
}
相关推荐
我讲个笑话你可别哭啊15 小时前
鸿蒙ArkTS快速入门
前端·ts·arkts·鸿蒙·方舟开发框架
CherryLee_121015 小时前
基于poplar-annotation前端插件封装文本标注组件及使用
前端·文本标注
特立独行的猫a15 小时前
C++轻量级Web框架介绍与对比:Crow与httplib
开发语言·前端·c++·crow·httplib
周航宇JoeZhou15 小时前
JB2-7-HTML
java·前端·容器·html·h5·标签·表单
代码小库15 小时前
【课程作业必备】Web开发技术HTML静态网站模板 - 校园动漫社团主题完整源码
前端·html
VT.馒头15 小时前
【力扣】2722. 根据 ID 合并两个数组
javascript·算法·leetcode·职场和发展·typescript
珹洺15 小时前
Bootstrap-HTML(二)深入探索容器,网格系统和排版
前端·css·bootstrap·html·dubbo
BillKu15 小时前
VS Code HTML CSS Support 插件详解
前端·css·html
xixixin_15 小时前
【React】中 Body 类限定法:优雅覆盖挂载到 body 的组件样式
前端·javascript·react.js
换日线°15 小时前
NFC标签打开微信小程序
前端·微信小程序