react native输入框 输入金额等数据后如何格式化显示
来源:互联网 发布:centos 7 dhcp ip配置 编辑:程序博客网 时间:2024/06/07 16:31
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> ); }}
首先,state声明一个输入框是否正在输入的状态endEdit和一个用来表示输入框中显示的值money; 然后,在onblue获得焦点的实践中,将是否正在输入的状态改为false,输入框中的显示money;输入完成,将endEdit改为出,输入框中的值改为格式化后的值。
0 0
- react native输入框 输入金额等数据后如何格式化显示
- jsp 金额###,###显示与输入
- React Native 网络获取数据后,listView显示数据
- 金额输入框 MoneyView
- android输入金额格式化文本框金额格式控制
- android输入金额格式化文本框金额格式控制
- react-native试玩(22)-文本输入框
- react native TextInput无法弹出输入框问题
- React-native键盘遮挡输入框问题的解决
- React Native 聊天室置底输入框的设计
- 金额输入框正则表达式,金额校验
- UITextField作为金额输入框,输入限制
- React Native 组件 --TextInput处理文本输入
- React native (5) 处理文本输入
- 金额框(输入框限制)
- 自定义控件-金额输入框
- JAVA学习---两个输入框,输入后回车,另一个显示
- React-Native实现登录页面,并显示和清除用户的输入
- mat工具MemoryAnalyzer进行分析java内存溢出hprof文件
- android 6.0 权限bug、权限处理
- Spring mvc 配置mongodb多数据源
- Windows 下比较好用的小软件
- Android 6.0权限注意点
- react native输入框 输入金额等数据后如何格式化显示
- lightoj 1076 【二分找满足条件的最左】
- JS打乱数组顺序
- Network In Network
- The difference between slice() and splice()
- 获取浏览器的高度
- android自定义View
- java mysql的latin1转UTF-8
- Activity、Fragment转场动画