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();
}
相关推荐
橙序员小站2 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名4 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫4 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊4 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter4 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折5 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_5 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
不会敲代码15 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Angelial5 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js
jiayu5 小时前
Angular学习笔记24:Angular 响应式表单 FormArray 与 FormGroup 相互嵌套
前端