react ant中阻止Input或者InputNumber输入小数点.

在某一开发中

需求第一天：我只需要一个可编辑的Input框，ok简单：

<Input placeholder="我是一个可编辑的input框" />

需求第二天：我希望这个input框只能输入数字：

<InputNumber onChange={onChange} />

需求第三天：我希望这个框只能保留小数点后两位，且进行四舍五入：

<InputNumber type="number" precision={2} placeholder="保留小数点后两位" />

需求第四天：我希望这个框只能输入非负的正整数：

<InputNumber placeholder="请输入非负的正整数" type="number" min={0} precision={0} />

需求第五天：客户说这个体验不好，禁止输入小数点和其他除数字以外字符：

<InputNumber placeholder="请输入非负的正整数" type="number" min={0} onKeyPress={handleKeyPress}  />

// onKeyPress时禁止输入小数点及其他特殊数字字符
const handleKeyPress = (event) => {const invalidChars = ['-', '+', 'e', '.', 'E']if(invalidChars.indexOf(event.key) !== -1){event.preventDefault()}
}

react ant中阻止Input或者InputNumber输入小数点.相关推荐

在不同浏览器中，input里面的输入光标大小表现形式却大不相同
问题:在不同浏览器中,input里面的输入光标大小表现形式却大不相同,具体的如下: IE:不管该行有没有文字,光标高度与font-size一致. FF:该行有文字时,光标高度与font-size一致. ...
HTML5 中的 input 元素的输入类型（type 属性的取值）
目录输入类型:text 输入类型:image 输入类型:reset 输入类型:password 输入类型:submit 输入类型:radio 输入类型:checkbox 输入类型:button 输入 ...
React Native 中 TextInput 组件和中文输入冲突
原文转载自我的 Github 博客在用 React Native (下称 RN) 开发面向国人的应用时,不可避免会有用户使用中文输入法的情景.在 RN 中,负责输入内容的控件是 <TextIn ...
React+ant中的Form表单的刷新
我们使用ant组件库的Form表单提交之后不刷新整个页面,表单中的内容有时候是不会刷新,如何解决这个问题? 首先定义一个[form]通过 Form.useForm 对表单数据域进行交互, const ...
html 在td中加入input,如何将输入标签插入到td标签中？
我有生成表的代码.你可以在代码下面看到.如何将输入标签插入到td标签中? function createDynamicTable(tbody, rows, cols) { if (tbody == n ...
html限定输入的内容,HTML中限制input 输入框输入内容
限制 input 输入框只能输入纯数字 1.onkeyup = "value=value.replace(/[^\d]/g,'')" 使用 onkeyup 事件,有 bug ,那就 ...
input如何限制输入的内容？不能输入负数或字母？
判项目中需要进行input限制只能输入正整数,翻遍了网上的代码 <script>function checkNum(event){//不能输入负数英文状态下if(event.key==& ...
关于微信手机端IOS系统中input输入框无法输入的问题
最近两天做移动端游戏举报页面.遇到一个问题,移动端的input都不能输入了,后来发现可能是 -webkit-user-select :none ; 在移动端开发中,我们有时有针对性的写一些特殊的重置, ...
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
壹 ❀ 引在前面两篇文章中,我们花了较大的篇幅介绍react的setState方法,在介绍setState同步异步时提到,在react合成事件中react对于this.state更新都是异步,但在原 ...

react ant中阻止Input或者InputNumber输入小数点.

react ant中阻止Input或者InputNumber输入小数点.相关推荐

最新文章

热门文章