react native输入框输入金额等数据后如何格式化显示

最新推荐文章于 2024-06-26 09:44:12 发布

xiaoxiang-chen

最新推荐文章于 2024-06-26 09:44:12 发布

阅读量7.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： app开发文章标签： react native TextInput 格式化

本文链接：https://blog.youkuaiyun.com/fengzijinliang/article/details/53335320

app开发专栏收录该内容

22 篇文章

订阅专栏

在React Native应用中，为TextInput组件处理输入的金额数据格式化，可以通过监听焦点变化来实现。首先，定义一个state记录输入状态（endEdit）和显示的金额（money）。当输入框获取焦点时，设置endEdit为false，显示原始输入；失去焦点时，endEdit设为true，将输入值转换并格式化后更新到money中。

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

import React ,{ Component } from 'react';
import {View} from 'react-native';
import {
  Cells,
  Cell,
  CellHeader,
  CellBody,
  CellFooter,
  CellText,
  Input,
  Label,
} from 'rn-weui/src';
export class InputBox extends Component{
    constructor(props) {
      super(props);
      this.state = {
            money:'',
            endEdit:true
        };
        this.fmoney = this.fmoney.bind(this);
    }
        /**
     * 格式化money
     * s为要格式化的money
     * n为小数位数
     */
    fmoney(s, n){   
         if(s==='')
            return;
       n = n > 0 && n <= 20 ? n : 2;   
       s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";   
       var l = s.split(".")[0].split("").reverse(),   
       r = s.split(".")[1];   
       var t = "";   
       for(let i = 0; i < l.length; i ++ ) {   
          t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");   
       }   
       return t.split("").reverse().join("") + "." + r;   
    } 

    render(){
        return (
            <Cells>
             <Cell>
          <CellHeader><Label>单价</Label></CellHeader>
          <CellBody>
            <View>
              <Input style={{height:40}} 
                underlineColorAndroid="transparent"
                placeholder="请输入金额"
                keyboardType='numeric'
                value={this.state.endEdit?this.fmoney(this.state.money,2):this.state.money+''}
                            onChangeText={(text)=>{
                                this.setState({money:text});    
                            }}      
                            onFocus={()=>{
                                // this.setState({endEdit:false});
                                this.setState({endEdit:false,money:''});
                            }}
                            onEndEditing={(event) => {
                                this.setState({endEdit:true});
                            }}
                          ></Input>
                        </View>
          </CellBody>
          <CellFooter>元</CellFooter>
        </Cell>

        <Cell>
        <CellHeader><Label>单价</Label></CellHeader>
          <CellBody>
            <View>
              <Input style={{height:40}} 
                underlineColorAndroid="transparent"
                placeholder="请输入物品单价"
                keyboardType='numeric'
                          ></Input>
                        </View>
          </CellBody>
          <CellFooter>元</CellFooter>
        </Cell>
        </Cells>
        );
    }
}