Javascript 用户输入验证工作不正常

我试图在我的ReactNative应用程序中创建一个组件，其中用户只能提供数字作为输入，但我的JavaScript reg表达式无法正常工作。我使用React-Native钩子来管理状态。我尝试只验证用户输入的数字，但输入文本字段也将数字替换为空字符串。组件的代码如下所示

import React, { useState } from 'react';
import { StyleSheet, Text, View, TextInput, Button, TouchableOpacity } from 'react-native';
import Card from '../components/Card';
import Colors from '../constants/Colors';
import Input from '../components/Input';


const StartGameScreen = props => {

  const [enteredValue, setEnteredValue] = useState ('');

  const numberInputHandler = inputText => {
    setEnteredValue (inputText.replace(/[^0-9]/g, ''));
  };

  return (
    <View style={styles.screen}>
      <Text style={styles.title}>Start a New Game</Text>
      <Card style={styles.inputContainer}>
        <Text>Select a Number</Text>
        <Input style={styles.inputText} 
        blurOnSubmit 
        auotCaptalize={'none'} 
        autoCorrect={false} 
        maxLength={2} 
        keyboardType={'number-pad'}
        onChnageText={numberInputHandler}
        value={enteredValue}
        />
        <View style={styles.buttonContainer}>
          <TouchableOpacity activeOpacity={0.4} style={{backgroundColor: Colors.accent, ...styles.button}}>
            <Text style={styles.buttonText}>Reset</Text>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.4} style={{backgroundColor: Colors.primary, ...styles.button}}>
            <Text style={styles.buttonText}>Confirm</Text>
          </TouchableOpacity>
        </View>
      </Card>
    </View>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    padding: 10,
    alignItems: 'center'
  },
  button: {
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
    height: 35,
    width: 80
  },
  buttonText: {
    color: 'white'
  },
  title: {
    fontSize: 20,
    marginVertical: 10
  },
  inputContainer: {
    padding: 10,
    width: 300,
    height: 120,
    maxWidth: '80%'
  },
  inputText: {
    width: 35,
    textAlign: "center",
  },
  buttonContainer: {
    height: 30,
    flexDirection: 'row',
    width: '100%',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    alignItems: "center"
  }
});

export default StartGameScreen;

import React，{useState}来自“React”；
从“react native”导入{样式表、文本、视图、文本输入、按钮、TouchableOpacity}；
从“../components/Card”导入卡片；
从“../constants/Colors”导入颜色；
从“../components/Input”导入输入；
const StartGameScreen=道具=>{
常量[enteredValue，setEnteredValue]=useState（“”）；
常量numberInputHandler=inputText=>{
setEnteredValue（inputText.replace（/[^0-9]/g'）；
};
返回(
开始新游戏
选择一个数字
重置
证实
);
}
const styles=StyleSheet.create({
屏幕：{
弹性：1，
填充：10，
对齐项目：“中心”
},
按钮：{
边界半径：8，
为内容辩护：“中心”，
对齐项目：“居中”，
身高：35，
宽度：80
},
按钮文字：{
颜色：“白色”
},
标题：{
尺寸：20，
利润率：10
},
输入容器：{
填充：10，
宽度：300，
身高：120，
最大宽度：“80%”
},
输入文本：{
宽度：35，
textAlign：“居中”，
},
按钮容器：{
身高：30，
flexDirection:'行'，
宽度：“100%”，
justifyContent:'之间的空间'，
水平方向：15，
对齐项目：“中心”
}
});
导出默认的启动屏幕；

输入组件的代码如下：

import React from 'react';
import { TextInput, StyleSheet} from 'react-native';

const Input = props => {
    return (
        <TextInput {...props} style={{...styles.input, ...props.style}}/>
    );
}

const styles = StyleSheet.create({
    input: {
        height: 30,
        borderBottomWidth: 1,
        borderBottomColor: 'grey',
        marginVertical: 10
    }
});

export default Input;

从“React”导入React；
从“react native”导入{TextInput，样式表}；
常量输入=道具=>{
返回(
);
}
const styles=StyleSheet.create({
输入：{
身高：30，
边界宽度：1，
边框底部颜色：“灰色”，
利润率：10
}
});
导出默认输入；

您在负责处理更改的

StartNameScreen

组件上执行

输入时，拼写错误了道具

onChnageText
应该是
onChangeText

非数字被“替换”的原因实际上也是因为由于该输入错误，更改处理程序没有映射到
onChangeText

额外说明：

您还在
输入
实现中输入了另一个错误

auotcapitalize
应该是
autoCapitalize
您在负责处理更改的
StartGameScreen
组件上执行
Input
时拼写错误

onChnageText
应该是
onChangeText

非数字被“替换”的原因实际上也是因为由于该输入错误，更改处理程序没有映射到
onChangeText

额外说明：

您还在
输入
实现中输入了另一个错误

auotcapitalize
应该是
autoCapitalize
有两个拼写错误：

auotcapitalize={'none'}
应该是
autoCapitalize={'none'}
，而
onChnageText={numberInputHandler}
应该是
onChangeText={numberInputHandler}
有两个拼写错误：

auotcapitalize={'none'}
应该是
autoCapitalize={'none'}
，而
onChnageText={numberInputHandler}
应该是
onChangeText={numberInputHandler}