Vraag Reageer Native TextInput die alleen numerieke tekens accepteert


Ik moet een component React Native TextInput hebben waarmee alleen numerieke tekens (0 - 9) kunnen worden ingevoerd. Ik kan het toetsenbordtype instellen op 'numeriek', waardoor ik er bijna alleen voor de invoer (behalve) in kan komen (.). Dit doet echter niets om te stoppen met het plakken van niet-numerieke tekens in het veld.

Wat ik tot nu toe heb bedacht is om de OnChangeText-gebeurtenis te gebruiken om naar de ingevoerde tekst te kijken. Ik verwijder alle niet-numerieke tekens uit de tekst. Plaats de tekst vervolgens in een statusveld. Update vervolgens de TextInput via zijn Value-eigenschap. Codefragment hieronder.

<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})
}

Dit lijkt te werken, maar het lijkt op een hack. Is er een andere manier om dit te doen?


46
2017-10-05 10:50


oorsprong


antwoorden:


Dat is de juiste manier om het te doen totdat een dergelijke component (of attribuut op de TextInput) specifiek is ontwikkeld.

Het web heeft het 'nummer'-type voor het invoerelement, maar dat is webgebaseerd en react native gebruikt geen webweergave.

Je zou kunnen overwegen om die input als een eigen reactieve component te creëren (misschien NumberInput aanroepen): die stelt je in staat om hem opnieuw te gebruiken of zelfs open source, omdat je veel TextInputs kunt maken met verschillende waardefilters / checkers.

Het nadeel van directe correctie is om ervoor te zorgen dat de gebruiker correcte feedback krijgt om verwarring te voorkomen over wat er met zijn waarde is gebeurd


11
2017-10-05 19:55



Je kunt het zo doen. Het accepteert alleen numerieke waarden en beperkt tot 10 nummers naar wens.

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

U kunt de ingevoerde waarde zien door de volgende code op uw pagina te schrijven:

{this.state.myNumber}

In de functie onChanged () ziet de code er als volgt uit:

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 });
}

Ik hoop dat dit nuttig is voor anderen.


41
2017-11-25 10:59



Het gebruik van een RegExp om elk niet-cijfer te vervangen is sneller dan het gebruik van een lus met een witte lijst, zoals andere antwoorden.

Gebruik dit voor uw onTextChange handler:

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

Prestatietest hier: https://jsperf.com/removing-non-digit-characters-from-a-string


28
2017-12-11 10:50



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

en onChanged-methode:

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 });
    }
}

2
2017-12-08 08:34



Een RegExp gebruiken om elk niet-cijfer te vervangen. Zorg ervoor dat de volgende code je het eerste cijfer geeft dat hij heeft gevonden, dus als de gebruiker een alinea met meer dan één cijfer (xx.xx) plakt, geeft de code je het eerste nummer. Dit helpt als je iets wilt zoals prijs, geen mobiele telefoon.

Gebruik dit voor uw onTextChange handler:

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

1
2018-02-27 17:47



Ik had hetzelfde probleem in iOS, met de gebeurtenis onChangeText om de waarde bij te werken van de door de gebruiker getypte tekst Ik kon de waarde van de TextInput niet bijwerken, zodat de gebruiker de niet-numerieke tekens die hij typte, nog steeds zou zien.

Dit kwam omdat, wanneer een niet-numeriek teken werd ingedrukt, de status niet zou veranderen omdat this.setState hetzelfde nummer zou gebruiken (het aantal dat overblijft na het verwijderen van de niet-numerieke tekens) en vervolgens de TextInput niet opnieuw rendert.

De enige manier om dit op te lossen was om de keyPress-gebeurtenis te gebruiken die plaatsvindt vóór de onChangeText -gebeurtenis en daarin setState te gebruiken om de waarde van de staat in een andere te veranderen, helemaal anders, waardoor de re-render wordt gedwongen wanneer de onChangeText -gebeurtenis werd aangeroepen . Niet erg blij hiermee, maar het werkte.


1
2018-05-01 22:52



Ik heb een component gemaakt die dit probleem oplost:

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


0
2017-07-21 19:15



Dit werkt niet op IOS, setState -> render -> verandert de tekst niet, maar kan andere veranderen. De textinput kan zelf de waarde niet wijzigen als textOnChange.

trouwens, dit werkt goed op Android.


-1
2018-01-22 03:36