React Native TextInput, który akceptuje tylko znaki numeryczne

Potrzebuję TextInputkomponentu React Native , który pozwoli na wprowadzanie tylko znaków numerycznych (0 - 9). Mogę ustawić, keyboardTypedo numericktórego prawie mnie tam doprowadza, z wyjątkiem kropki (.). Jednak to nic nie powstrzymuje wklejania znaków nienumerycznych do pola.

To, co do tej pory wymyśliłem, to użycie OnChangeTextzdarzenia do spojrzenia na wprowadzony tekst. Usuwam z tekstu wszelkie znaki nienumeryczne. Następnie umieść tekst w polu stanu. Następnie zaktualizuj TextInputpoprzez jego Valuewłaściwość. Fragment kodu poniżej.

<TextInput 
  style={styles.textInput}
  keyboardType = 'numeric'
  onChangeText = {(text)=> this.onChanged(text)}
  value = {this.state.myNumber}
/> 

onTextChanged(text) {
  // code to remove non-numeric characters from text
  this.setState({myNumber: text})
}

Wydaje się, że to działa, ale wygląda na włamanie. Czy jest inny sposób, aby to zrobić?

Jest to właściwy sposób, aby to zrobić, dopóki taki komponent (lub atrybut w TextInput) nie zostanie specjalnie opracowany.

Sieć ma typ „numer” dla elementu wejściowego, ale jest on oparty na sieci i natywny dla reagowania nie korzysta z widoku internetowego.

Możesz rozważyć utworzenie tego wejścia jako samodzielnego komponentu reagującego (może zadzwonić do NumberInput): umożliwi to ponowne użycie, a może nawet otwarcie źródła, ponieważ możesz utworzyć wiele TextInput, które mają różne filtry / kontrolery wartości.

Wadą natychmiastowej korekty jest zapewnienie prawidłowej informacji zwrotnej użytkownikowi, aby uniknąć nieporozumień co do tego, co stało się z jego wartością

Użycie RegExp do zastąpienia dowolnej liczby niebędącej cyfrą jest szybsze niż użycie pętli for z białą listą, tak jak robią to inne odpowiedzi.

Użyj tego dla swojej obsługi onTextChange:

onChanged (text) {
    this.setState({
        mobile: text.replace(/[^0-9]/g, ''),
    });
}

Test wydajności tutaj: https://jsperf.com/removing-non-digit-characters-from-a-string

Możesz to zrobić w ten sposób. Przyjmuje tylko wartości liczbowe i ogranicza się do 10 liczb według własnego uznania.

<TextInput 
   style={styles.textInput}
   keyboardType='numeric'
   onChangeText={(text)=> this.onChanged(text)}
   value={this.state.myNumber}
   maxLength={10}  //setting limit of input
/>

Możesz zobaczyć wprowadzoną wartość, wpisując następujący kod na swojej stronie:

{this.state.myNumber}

W funkcji onChanged () kod wygląda następująco:

onChanged(text){
    let newText = '';
    let numbers = '0123456789';

    for (var i=0; i < text.length; i++) {
        if(numbers.indexOf(text[i]) > -1 ) {
            newText = newText + text[i];
        }
        else {
            // your call back function
            alert("please enter numbers only");
        }
    }
    this.setState({ myNumber: newText });
}

Mam nadzieję, że jest to pomocne dla innych.

React Native TextInput zapewnia właściwości keyboardType z następującymi możliwymi wartościami: domyślna klawiatura numeryczna klawiatura dziesiętna numeryczna adres e-mail klawiatura telefoniczna

więc w twoim przypadku możesz użyć keyboardType = 'number-pad' do akceptowania tylko liczb. Nie obejmuje to „.”

więc,

<TextInput 
  style={styles.textInput}
  keyboardType = 'number-pad'
  onChangeText = {(text)=> this.onChanged(text)}
  value = {this.state.myNumber}
/>

jest tym, czego musisz użyć w swoim przypadku.

Aby uzyskać więcej informacji, zapoznaj się z oficjalnym linkiem do dokumentu TextInput: https://facebook.github.io/react-native/docs/textinput#keyboardtype

Funkcja sprawdzania poprawności danych wejściowych:

validateInputs(text, type) {
let numreg = /^[0-9]+$/;
  if (type == 'username') {
    if (numreg.test(text)) {
      //test ok
    } else {
      //test not ok
    } 
  }
}



<TextInput
   onChangeText={text => this.validateInputs(text, 'username')}
/>

Mam nadzieję, że to jest pomocne.

Zezwalaj tylko na liczby używające wyrażeń regularnych

<TextInput 
  keyboardType = 'numeric'
  onChangeText = {(e)=> this.onTextChanged(e)}
  value = {this.state.myNumber}
/> 

onTextChanged(e) {
  if (/^\d+$/.test(e.toString())) { 
    this.setState({ myNumber: e });
  }
}

Możesz chcieć mieć więcej niż jedną weryfikację

<TextInput 
  keyboardType = 'numeric'
  onChangeText = {(e)=> this.validations(e)}
  value = {this.state.myNumber}
/> 

numbersOnly(e) {
    return /^\d+$/.test(e.toString()) ? true : false
}

notZero(e) {
    return /0/.test(parseInt(e)) ? false : true
}

validations(e) {
    return this.notZero(e) && this.numbersOnly(e)
        ? this.setState({ numColumns: parseInt(e) })
        : false
}

Pierwsze rozwiązanie

Możesz użyć keyboardType = 'numeric'do klawiatury numerycznej.

  <View style={styles.container}>
        <Text style={styles.textStyle}>Enter Number</Text>
        <TextInput
          placeholder={'Enter number here'}
          style={styles.paragraph}
          keyboardType="numeric"
          onChangeText={value => this.onTextChanged(value)}
          value={this.state.number}
        />
      </View>

W pierwszym przypadku uwzględniane są znaki interpunkcyjne, np .: - . i -

Drugie rozwiązanie

Użyj wyrażenia regularnego, aby usunąć znaki interpunkcyjne.

 onTextChanged(value) {
    // code to remove non-numeric characters from text
    this.setState({ number: value.replace(/[- #*;,.<>\{\}\[\]\\\/]/gi, '') });
  }

Sprawdź link do przekąski

https://snack.expo.io/@vishal7008/numeric-keyboard

Uprzejme przypomnienie dla tych, którzy napotkali problem, że „onChangeText” nie może zmienić wartości TextInput zgodnie z oczekiwaniami na iOS: jest to w rzeczywistości błąd w ReactNative i został naprawiony w wersji 0.57.1. Zobacz: https://github.com/facebook/react-native/issues/18874

<TextInput autoCapitalize={'none'} maxLength={10} placeholder='Mobile Number'  value={this.state.mobile} onChangeText={(mobile) => this.onChanged(mobile)}/>

i onChanged metoda:

onChanged(text){
   var newText = '';
   var numbers = '0123456789';
   if(text.length < 1){
     this.setState({ mobile: '' });
   }
   for (var i=0; i < text.length; i++) {
        if(numbers.indexOf(text[i]) > -1 ) {
             newText = newText + text[i];
        }
        this.setState({ mobile: newText });
    }
}

Miałem ten sam problem w iOS, używając zdarzenia onChangeText do aktualizacji wartości tekstu wpisanego przez użytkownika. Nie byłem w stanie zaktualizować wartości TextInput, więc użytkownik nadal widziałby znaki nienumeryczne, które wpisał.

Dzieje się tak, ponieważ po naciśnięciu znaku nienumerycznego stan się nie zmieni, ponieważ this.setState używałby tej samej liczby (liczby, która pozostała po usunięciu znaków nienumerycznych), a następnie TextInput nie byłby ponownie renderowany.

Jedynym sposobem rozwiązania tego problemu było użycie zdarzenia keyPress, które ma miejsce przed zdarzeniem onChangeText i użycie w nim setState do zmiany wartości stanu na inny, zupełnie inny, wymuszając ponowne renderowanie, gdy wywołano zdarzenie onChangeText . Niezbyt zadowolony z tego, ale zadziałało.

if (!/^[0-9]+$/.test('123456askm')) {
  consol.log('Enter Only Number');
} else {
    consol.log('Sucess');
}

Napisałem tę funkcję, która okazała się pomocna, aby uniemożliwić użytkownikowi wprowadzenie czegokolwiek innego, niż byłbym skłonny zaakceptować. Użyłem też keyboardType="decimal-pad"i mójonChangeText={this.decimalTextChange}

  decimalTextChange = (distance) =>
{
    let decimalRegEx = new RegExp(/^\d*\.?\d*$/)
    if (distance.length === 0 || distance === "." || distance[distance.length - 1] === "."
        && decimalRegEx.test(distance)
    ) {
        this.setState({ distance })
    } else {
        const distanceRegEx = new RegExp(/^\s*-?(\d+(\.\d{ 1, 2 })?|\.\d{ 1, 2 })\s*$/)
        if (distanceRegEx.test(distance)) this.setState({ distance })
    }
}

Pierwszy ifblok to obsługa błędów w przypadku, gdy użytkownik usuwa cały tekst lub używa kropki dziesiętnej jako pierwszego znaku, lub jeśli próbuje wstawić więcej niż jedno miejsce dziesiętne, drugiif blok zapewnia, że ​​może wpisać jako dowolną liczbę liczb przed miejscem dziesiętnym, ale tylko do dwóch miejsc po przecinku.

Użycie RegExp do zastąpienia dowolnej cyfry. Uważaj, gdy następny kod da ci pierwszą znalezioną cyfrę, więc jeśli użytkownik wklei akapit z więcej niż jedną liczbą (xx.xx), kod da ci pierwszą liczbę. To pomoże, jeśli chcesz mieć coś w rodzaju ceny, a nie telefonu komórkowego.

Użyj tego dla swojej obsługi onTextChange:

onChanged (text) {
    this.setState({
        number: text.replace(/[^(((\d)+(\.)\d)|((\d)+))]/g,'_').split("_"))[0],
    });
}

Możesz usunąć znaki nienumeryczne za pomocą wyrażenia regularnego

onTextChanged (text) {
    this.setState({
        myNumber: text.replace(/\D/g, ''),
    });
}

const [text, setText] = useState('');

const onChangeText = (text) => {
  if (+text) {
    setText(text);
  }
};

<TextInput
  keyboardType="numeric"
  value={text}
  onChangeText={onChangeText}
/>

Powinno to zaoszczędzić na fizycznych klawiaturach

To nie działa na IOS, setState -> render -> nie zmienia tekstu, ale może zmienić inne. Textinput nie może zmienić swojej wartości, gdy textOnChange.

przy okazji, to działa dobrze na Androida.

Stworzyłem komponent, który rozwiązuje ten problem:

https://github.com/amirfl/react-native-num-textinput

Oto moja inna prosta odpowiedź, aby zaakceptować tylko liczby w polu tekstowym za pomocą wyrażeń regularnych.

onChanged(text){
    this.setState({ 
         myNumber: text.replace(/[^0-9]/g, '') 
    });
}

Spróbuj tego tylko dla liczb dziesiętnych / zmiennoprzecinkowych

    onChangeMyFloatNumber(text){
let newText = '';
let numbers = '0123456789.';

for (var i=0; i < text.length; i++) {
    if(numbers.indexOf(text[i]) > -1 ) {
        newText = newText + text[i];
        if(text[i]=="."){
          numbers = '0123456789'
        }
    }
    else {
        // your call back function
        alert("please enter numbers only");
    }
}
this.setState({ MyFloatNumber: newText });

}

Cóż, jest to bardzo prosty sposób sprawdzenia poprawności liczby innej niż 0.

if (+inputNum)

Będzie NaN, jeśli inputNum nie jest liczbą lub false, jeśli jest równe 0