如何修复损坏的TextInput值更新程序

Question

我正在尝试使文本输入从右到左打印，以便...

• 默认：“ $ 0.00”，
• 用户输入1：“ $ 0.01”，
• 用户输入2：“ $ 0.12”，
• 用户输入3：“ $ 1.23”，
• 用户输入4：“ $ 12.34”

...等等。我的问题是，每按一次第3个按键，输入的内容就是前3次按，然后偶尔按随机键。我在做什么错了？

我尝试收集按键并将组合键添加到状态对象中，然后通过格式化帮助器方法运行它，最后将该值设置为textinput的值prop，但它不起作用。我已经在这里断断续续地工作了几个星期，不胜感激！

class EnterAmount extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            num: "",
            concatNum:""
        };
        this.handleKeyPress = this.handleKeyPress.bind(this);
    }

    printNum = (num) => {
        if(num.length === 0) {
            return '$0.00'
        } else if (num.length === 1) {
            return '$0.0' + num;
        } else if (num.length === 2) {
            return '$0.' + num
        } else {
            return '$' + num.slice(0, num.length - 2) + '.' + num.slice(num.length - 2, num.length)
        }
    }

    handleKeyPress(key) {
        console.log(key);
        if(key !== '.') { 
            this.setState(prevState=>({concatNum: prevState.concatNum + key}))
            this.setState(prevState => ({ num:  this.printNum(prevState.concatNum)}))
        }
    }

    render() {
        return (
            <TouchableWithoutFeedback>
                <View>
                    <View>
                        <Text>Custom Amount</Text>
                        <View>
                            <TextInput 
                                style={styles.input}
                                keyboardType={'numeric'}
                                returnKeyType={'done'}
                                onKeyPress={(e) => {this.handleKeyPress(e.nativeEvent.key)}}
                                value={this.state.num}
                            />
                        </View>
                    </View>
                </View>
            </TouchableWithoutFeedback>
        );
    }
}