react只能输入数字格式怎么设置

react只能输入数字格式怎么设置

如下所示，设置keyboardType='numeric'，用户输入时就会弹出数字键盘，如果用户通过粘贴或者其他方式输入非数字时，通过正则表达式把非数字替换成空字符串text.replace(/[^\d]+/, '')，达到只能输入数字的目的。

代码如下：

<TextInput
  style={{height: 40, borderColor: 'gray', borderWidth: 1}}
  onChangeText={(text) => {
    const newText = text.replace(/[^\d]+/, '');
    this.setState({inputValue: newText})
  }}
  value={this.state.inputValue}
  keyboardType='numeric'
/>

下面贴出完整代码及效果图，供大家学习。

效果图：

完整代码（新建一个文件，全部粘贴即可）：

import React, { Component } from 'react';
import {
  View,
  TextInput,
} from 'react-native';

export default class Demo extends Component {

 constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
    }
  }

  render() {
    return (
      <View>
        <TextInput
          style={{height: 40, borderColor: 'gray', borderWidth: 1}}
          onChangeText={(text) => {
            const newText = text.replace(/[^\d]+/, '');
            //可以打印看看是否过滤掉了非数字
            console.log(newText)
            this.setState({inputValue: newText})
          }}
          value={this.state.inputValue}
          //为了方便测试时输入字母，属性（keyboardType）不设置，实际使用时加上
          // keyboardType='numeric'
        />
      </View>
    )
  }  
}

注：如果没有达到效果，可以尝试换个环境，换真机测试，或者更换react-native版本。

更多React相关技术文章，请访问React答疑栏目进行学习！

以上就是react只能输入数字格式怎么设置的详细内容，更多请关注易知道|edz.cc其它相关文章！