validación de entrada de usuario no está funcionando correctamente

Shariq Ahmed Khan:

Estoy tratando de hacer que un componente en mi aplicación ReactNative en el que el usuario puede dar solamente números como entrada, pero mi JavaScript reg expresión no está funcionando correctamente. Solía ​​Reaccionar ganchos nativos para gestionar estados. Estoy tratando de validar la entrada del usuario de sólo números, pero el campo de texto de entrada también la sustitución de los números con cadena vacía. El código de componente es follwoing;

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;

El código para el componente de entrada es siguiente;

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;

Barry Michael Doyle:

Usted ha escrito mal el puntal en su implementación de Inputen su StartGameScreencomponente que es responsable de manejar el cambio.

onChnageText debiera ser onChangeText

La razón no sus números son "sustituido", así es en realidad debido a que el controlador de cambio no se asigna a onChangeTextdebido a la errata.

Nota adicional:

También ha hecho otro error en su Inputaplicación.

auotCaptalize debiera ser autoCapitalize