la validation des entrées utilisateur ne fonctionne pas correctement

Shariq Ahmed Khan:

Je suis en train de faire un composant dans mon application ReactNative dans lequel l'utilisateur peut donner des chiffres en entrée, mais l'expression de mon JavaScript ne fonctionne pas correctement. Je React crochets autochtones pour gérer les états. Je suis en train de l'entrée utilisateur validate pour seulement des chiffres, mais le champ de saisie de texte remplaçant également les chiffres avec une chaîne vide. Le code du composant est 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;

Le code pour le composant d'entrée est ci-après;

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:

Vous avez mal orthographié l'accessoire dans votre implémentation de Inputvotre StartGameScreencomposant qui est responsable de la gestion du changement.

onChnageText devrait être onChangeText

La raison pour laquelle vos numéros non sont « remplacés » comme il est bien fait parce que le gestionnaire de changement n'est pas mis en correspondance à onChangeTextcause de cette faute de frappe.

Remarque supplémentaire:

Vous avez également fait une faute de frappe dans votre Inputmise en œuvre.

auotCaptalize devrait être autoCapitalize