前端的TypeScript的 React 在项目里面封装 Input 输入框只能输入数字的hooks方法
前言
国庆7天假期虽然过得很快,但是回来连续上7天的班就会觉得这一周好长好长,再加上手里的需求做完上线之后,摸鱼都觉得时间太漫长了,所以既然有闲余的时间,那就接着来卷一卷,毕竟好久没有卷了。
今天就来聊一聊在项目中经常遇见的需求:Input输入框只能输入数字,之前遇见这样的需求都是在项目中直接进行编码的,这次就来将其封装为一个hook
,方便后续在项目中去进行引用,不再去编写过多的重复代码。
实现
这次没有背景,也没有效果图,直接开干!
这次还是使用React
来实现一个只能输入数字的Input
输入框。首先还是先来创建一个基础的Input
组件,如下:
import React, { useState } from 'react';
/**
* 输入数字组件
* @constructor
*/
const InputNumber = () => {
const [val, setVal] = useState('');
/**
* 输入框onChange
* @param e
*/
const onChangeInput = (e: any) => {
setVal(e.target.value);
}
return(
<>
<input type="text" value={val} onChange={e => onChangeInput(e)} style={{height: 24}}/>
</>
);
};
这样你就可以得到一个没有任何输入限制的输入框组件了。
下面就来加上限制:只能输入数字字符。
有经验的小伙伴瞬间就能想到只要在setVal
前加上移除非数字字符的方法,然后再setVal
即可。如下:
const InputNumber = () => {
const [val, setVal] = useState('');
/**
* 输入框onChange
* @param e
*/
const onChangeInput = (e: any) => {
const { value } = e.target || {};
let val = value.replace(/[^\d]/g, '');
setVal(val);
}
return(
<>
<input type="text" value={val} onChange={e => onChangeInput(e)} style={{height: 24}}/>
</>
);
};
从上述代码可以看到,移除非数字字符的方法是使用了replace
方法,然后通过正则/[^\d]/g
来查找非数字字符,找到就将其替换为空字符串,这样就能将非数字的字符给移除掉,最后就能返回一个只有数字字符的字符串了。
到这里,简单的实现一个只能输入数字的输入框组件就编写完成了,但是这不是我们的最终目的。为了可以在任何的Input
或输入框组件上使用,我们将试着将其封装为hook
,方便项目中进行引用。
那下面就来开始这篇文章的主题,将上述的代码改造一下就可得到一个只能输入数字的hook
,直接上代码,如下→
import React, { useState } from 'react';
// 输入数字hooks
const useInputNumberState = (defaultVal = ''): [string, (e: any) => void] => {
const [val, setVal] = useState(defaultVal);
const handleChange = (e: any) => {
const { value } = e.target || {};
let val = value.replace(/[^\d]/g, '');
setVal(val);
}
return [val, handleChange];
}
/**
* 输入数字组件
* @constructor
*/
const InputNumber = () => {
const [val, setVal] = useInputNumberState('');
return(
<>
<input type="text" value={val} onChange={e => setVal(e)} style={{height: 24}}/>
</>
);
};
export default InputNumber;
从上述代码可以看到,将之前的onChangeInput
的方法结合useState
封装了一个useInputNumberState
的hooks
,这样在页面使用的时候就不需要再编写onChangeInput
里面的逻辑,直接在页面顶部使用useInputNumberState
这个hooks
就能实现只能输入数字的逻辑了。
但是这个useInputNumberState
方法还存在缺陷,那就是如果用户输入的数字前面有0
的情况,就不是一个合法的整数,到时还需要在引用的页面再去移除数字前面的0
就显得多此一举,所以最好就在useInputNumberState
方法就把数字前面是0
的情况给处理掉,让其直接返回的值就是一个合法的整数。
说干就干,接着往下看→
// 输入数字hooks
const useInputNumberState = (defaultVal = ''): [string, (e: any) => void] => {
// 移除字符前面的零
const removeZeros = (str: string) => {
return str.replace(/^0 /, '');;
}
const [numVal, setNumVal] = useState(defaultVal);
const handleChange = (e: any) => {
const { value } = e.target || {};
let val = value.replace(/[^\d]/g, '');
setNumVal(removeZeros(val));
}
return [numVal, handleChange];
}
从上述代码可以看到,只需在useInputNumberState
方法里面增加一个移除字符串前面0
的removeZeros()
方法即可达到效果。
上述的代码示例中,是将useInputNumberState
方法放置在引用页面的顶部的,其实实际项目中,应该把useInputNumberState
方法定义在一个外部的js
文件中,然后再进行引用,这样就能让封装的useInputNumberState
方法能被其他协作的人进行调用,从而从根本解决不再重复编码的问题了。
最后,实现Input
输入框只能输入数字的需求并不复杂,只需在onChange
的时候对value
进行处理,从而就能得到只含数字的字符串了。希望可以通过这个只能输入数字的hooks
的思路,能帮助到你在实际工作中将其他常见的可复用的方法进行封装并能解决编写过多的重复代码的问题。
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanefjg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24