React Native之TextInput限制只能输入数字和小数

最新推荐文章于 2024-03-11 23:41:00 发布

FOXFarm

最新推荐文章于 2024-03-11 23:41:00 发布

阅读量1.5w

点赞数 1

分类专栏： React Native 文章标签： React Native之TextInp

本文链接：https://blog.csdn.net/fox_wei_hlz/article/details/70146831

版权

React Native 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

今天做了一个类似计算器的功能的，但是在输入TextInput遇到了这个问题了。那么我这次来写一下关于这个该怎么整理

import React from 'react';
import { StyleSheet, Text, View, Image, Dimensions, TextInput, TouchableOpacity, ScrollView } from 'react-native';

import Toast from '../../utils/ToastUtils'
import ToCalculate from './ToCoating'
export default class WallBrick extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            LongSize: '',
        }
    }

    chkPrice(obj) { //方法1
        obj = obj.replace(/[^\d.]/g, "");
        //必须保证第一位为数字而不是. 
        obj = obj.replace(/^\./g, "");
        //保证只有出现一个.而没有多个. 
        obj = obj.replace(/\.{2,}/g, ".");
        //保证.只出现一次，而不能出现两次以上 
        obj = obj.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
        return obj;
    }
    chkLast(obj) {
        // 如果出现非法字符就截取掉 
        if (obj.substr((obj.length - 1), 1) == '.')
            obj = obj.substr(0, (obj.length - 1));
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
             
                <ScrollView style={{ flex: 1 }}>
                    <View style={{ flex: 1 }}>
                        <View style={{ flex: 1 }}>
                            <View style={{ flex: 1 }}>
                                <TextInput underlineColorAndroid='transparent'
                                    placeholder=""
                                    placeholderTextColor='#8c8d8d'
                                    multiline={false}
                                    maxLength={6}
                                    keyboardType='numeric'

                                    value={this.state.LongSize} //方法2
                                    onChangeText={(text) => { 
                                        this.setState({ LongSize: this.chkPrice(text) })
                                    }}//方法3
                                >
                                </TextInput>
                            </View>
                            <View style={styles.itemTextView}>
                                <Text style={styles.itemText}>米</Text>
                            </View>
                        </View>
                    </View>

                   
                </ScrollView>

            </View>);
    }
}

方法1：是限制里面的text输入的限制反馈回去的只是一些数字或者是小数点，其中小数点不会多于2个。所以如果输入是1r.54实际上面返回的值是1.54，所以这个方法返回了。
然后设置一个state关于text
那么方法3：的作用是进行时时监听，其实就是在改变的监听Text的变化。那么在进行一次设置setstate然后在进行方法2：的设置就设置成明面上面的限制了。
然后方法2：的作用是设置输入的值。所以这样就容易简单的做到了限制了。
如果这个方法对你有作用的话。点一个赞。感谢不已！