React Native 实现过滤中文，只能输入数字和小数点

最新推荐文章于 2024-02-15 00:30:18 发布

首席外科戴夫

最新推荐文章于 2024-02-15 00:30:18 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签： React Native TextInput

本文链接：https://blog.csdn.net/weixin_44557421/article/details/88063532

学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在React Native中使用TextInput组件实现过滤，仅允许用户输入数字和小数点。通过onTextChange事件和isNaN函数进行验证，确保输入合法。对于eslint校验问题，也提供了解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React Native 实现过滤中文，只能输入数字和小数点

在使用React Native 的TextInput时，有时需要过滤中文，只能让用户输入数字和小数点。
但是TextInput方法本身没有相应的api，所以解决办法为，在onTextChange事件中手动过滤中文，再设置keyboardType=‘numeric’，用户输入时就会弹出数字键盘。

onTextChange代码：


	<TextInput 
		value={this.state.text}
		onTextChange={(val) =>{
      		text = isNaN(val) ? '' : val;
			this.setState({text});
		}
		keyboardType='numeric'
	/>

isNaN示例：

isNaN(NaN);       // true
isNaN(undefined); // true
isNaN({});        // true

isNaN(true);      // false
isNaN(null);      // false
isNaN(37);        // false

// strings
isNaN("37");      // false: 可以被转换成数值37
isNaN("37.37");   // false: 可以被转换成数值37.37
isNaN("37,5");    // true
isNaN('123ABC');  // true:  parseInt("123ABC")的结果是 123, 但是Number("123ABC")结果是 NaN
isNaN("");        // false: 空字符串被转换成0
isNaN(" ");       // false: 包含空格的字符串被转换成0

// dates
isNaN(new Date());                // false
isNaN(new Date().toString());     // true

isNaN("blabla")   // true: "blabla"不能转换成数值
                  // 转换成数值失败， 返回NaN

拿不准isNaN的同学，可以看这里。

有些同学使用了eslint语法校验，编译不通过的话可以参照以下代码：

    text = Number.isNaN(Number(val)) ? '' : val;