React-Native输入数字，每4个隔一个空格，回删bug 解决

最新推荐文章于 2023-03-08 16:04:30 发布

_大龄码农

最新推荐文章于 2023-03-08 16:04:30 发布

阅读量847

点赞数 1

分类专栏： ReactNative

本文链接：https://blog.youkuaiyun.com/qq_36229552/article/details/104036925

版权

ReactNative 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个React Native中用于输入银行卡号的组件实现。该组件利用正则表达式过滤输入内容中的空格，并在每输入4位数字后自动添加空格以提高可读性。此外，还详细介绍了组件的属性设置和事件监听方法。

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

<TextInput
            style={styles._text}
            placeholder="请输入卡号"
            placeholderTextColor={'#888'}
            underlineColorAndroid='transparent'
             multiline={true}
             onChangeText={this._onChange.bind(this)}
            value={this.state.inputValue}
            keyboardType='numeric'
           />

//监听输入卡号
    _onChange(value) {
        var str = '' ;
        //输入数字长度大于输入框内长度，每4个就一个空格
        if(value.length > this.state.inputValue.length){
            var reg =   /\s/g;//加入正则，过滤掉字符串中的空格
            value.replace( reg, "").split('').map(function (item,index) {
                (index+1) % 4 == 0 ? str = str + item + ' ': str += item;
            })
            this.setState({
                inputValue: str
            })
            return str;
        } else { 
        // 通过这样判断回删才会正常，不然会一直卡在空格位置
            this.setState({
                inputValue: value
            })
        }
    }

在这里插入图片描述