React-Native TextInput 只支持输入数字

作者: Mstian | 来源:发表于2021-10-13 22:02 被阅读0次

React-Native TextInput 只支持输入数字
react-native 自动计算行高textInput组件
react-native TextInput只能输入纯数字
React-Native 那些坑之TextInput
React-native TextInput组件的使用
React-Native TextInput不支持输入中文解决办
Flutter 隐藏键盘的两种方式
React Native-弹框存在TextInput，输入框有焦
React Native学习之路(9) - 注册登录验证的实现
element输入框只支持输入数字+小数

RN TextInput 组件有自带的有keyboardType Props可以直接弹起数字键盘，但是当有从粘贴板上粘贴的内容的时候，还是会粘贴进去，如果是购物车输入加车数量的时候，需求不允许输入非数字字符，那么就需要另外处理。

其中一个解决方案是可以用正则判断，当 TextInput 发生 Change的时候，用正则将非数字字符过滤为空字符串，这样再进行 setState，就能过滤掉非数字字符。代码如下：

<TextInput
      style={[styles.skuNumber]}
      value={this.state.skuNumber}
      keyboardType="phone-pad"
      onChangeText={(text) => {
          const newText = text.replace(/[^\d]+/, '');
          this.setState({ skuNumber: newText });
      }}
/>

即可。

有其他方案欢迎评论区讨论。

React-Native TextInput 只支持输入数字
RN TextInput 组件有自带的有keyboardType Props可以直接弹起数字键盘，但是当有从粘贴板...
react-native 自动计算行高textInput组件
react-native 根据textInput输入文本内容自动计算输入框高度
react-native TextInput只能输入纯数字
如下所示，设置keyboardType='numeric'，用户输入时就会弹出数字键盘，如果用户通过粘贴或者其他方...
React-Native 那些坑之TextInput
react-native开发总结之TextInput失去焦点触发事件和TextInput间切换 https://b...
React-native TextInput组件的使用
下面我给大家介绍一些React-native TextInput的组件的属性： TextInput组件在一个应用...
React-Native TextInput不支持输入中文解决办
写在前面，最近因接手公司新项目，React-Native0.55.4版本，发现TextInput 在iOS平台上无...
Flutter 隐藏键盘的两种方式
保留输入框焦点 SystemChannels.textInput.invokeMethod('TextInput....
React Native-弹框存在TextInput，输入框有焦
Bug情况描述：React Native项目中，点击按钮A出现弹框浮层，弹框中需要TextInput输入数字，键盘...
React Native学习之路(9) - 注册登录验证的实现
(1)TextInput文本输入框 TextInput属性 (1) keyboardType ：设置键盘类型（决定...
element输入框只支持输入数字+小数
网友评论