TextInput，从右到左输入数字并自动为钱输入添加零 [英] TextInput with typing digits from right to left and adding zeroes automatically for money input

问题描述

我正在尝试实现 TextInput，从右到左输入数字并在用户输入时自动添加零.任何想法如何正确实施?

预期的行为应该类似于

我现在拥有的:

 构造函数(道具){超级(道具)；this.state = {支付率:'',};}handleTextChange = (文本) =>{const newAmount = parseFloat(text/100);this.setState({支付率:新金额，})<文本输入自动对焦style={[styles.textInput]}价值={支付率}占位符=0.00"最大长度={9}键盘类型=数字"placeholderTextColor="#adecf5"onChangeText={this.handleTextChange}underlineColorAndroid='rgba(0,0,0,0)'自动大写=无"选择={{开始:光标，结束:光标}}/>

解决方案

为此我们使用 react-native-masked-text，效果不错.https://github.com/benhurott/react-native-masked-text/blob/master/README.md

I'm trying to implement TextInput with typing digits from right to left and adding zeroes automatically while user is typing. Any ideas how to implement this correctly?

The expected behavior should look like this.

What I have right now:

 constructor(props) {
    super(props);
    this.state = {
      payrate: '',
    };
  }

  handleTextChange = (text) => {
    const newAmount = parseFloat(text/100);
     this.setState({
       payrate: newAmount,
     })


 <TextInput
         autoFocus
         style={[styles.textInput]}
         value={payrate}
         placeholder="0.00"
         maxLength={9}
         keyboardType="numeric"
         placeholderTextColor="#adecf5"
         onChangeText={this.handleTextChange}
         underlineColorAndroid='rgba(0,0,0,0)'
         autoCapitalize="none"
         selection={{start: cursor, end: cursor}}
         />

解决方案

We use react-native-masked-text for that, works decently. https://github.com/benhurott/react-native-masked-text/blob/master/README.md

这篇关于TextInput，从右到左输入数字并自动为钱输入添加零的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！