Ich benötige eine React Native- TextInput
Komponente, mit der nur numerische Zeichen (0 - 9) eingegeben werden können. Ich kann das einstellen, keyboardType
auf numeric
das ich bis auf den Punkt (.) Fast zur Eingabe komme. Dies verhindert jedoch nicht, dass nicht numerische Zeichen in das Feld eingefügt werden.
Was ich mir bisher ausgedacht habe, ist, das OnChangeText
Ereignis zu verwenden, um den eingegebenen Text zu betrachten. Ich entferne alle nicht numerischen Zeichen aus dem Text. Fügen Sie dann den Text in ein Statusfeld ein. Aktualisieren TextInput
Sie dann die Value
Eigenschaft through . Code-Snippet unten.
<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})
}
Dies scheint zu funktionieren, aber es scheint wie ein Hack. Gibt es einen anderen Weg, dies zu tun?
react-native
Terry
quelle
quelle
Antworten:
Dies ist der richtige Weg, bis eine solche Komponente (oder ein solches Attribut im TextInput) speziell entwickelt wurde.
Das Web hat den Typ 'number' für das Eingabeelement, aber das ist webbasiert und React-Native verwendet keine Webansicht.
Sie können diese Eingabe auch als eigenständige Reaktionskomponente erstellen (möglicherweise NumberInput aufrufen). Auf diese Weise können Sie sie wiederverwenden oder sogar als Open Source-Datei verwenden, da Sie viele TextInputs mit unterschiedlichen Wertefiltern / -prüfern erstellen können.
Der Nachteil einer sofortigen Korrektur besteht darin, sicherzustellen, dass dem Benutzer ein korrektes Feedback gegeben wird, um Verwirrung darüber zu vermeiden, was mit seinem Wert geschehen ist
quelle
Die Verwendung eines RegExp zum Ersetzen von Nicht-Ziffern ist schneller als die Verwendung einer for-Schleife mit einer Whitelist, wie dies bei anderen Antworten der Fall ist.
Verwenden Sie dies für Ihren onTextChange-Handler:
Leistungstest hier: https://jsperf.com/removing-non-digit-characters-from-a-string
quelle
text.replace(/[^A-Za-z]/g, '')
Sie können es so machen. Es werden nur numerische Werte akzeptiert und auf Wunsch auf 10 Zahlen begrenzt.
Sie können den eingegebenen Wert sehen, indem Sie den folgenden Code auf Ihre Seite schreiben:
In der Funktion onChanged () sieht der Code folgendermaßen aus:
Ich hoffe das ist hilfreich für andere.
quelle
React Native TextInput bietet KeyboardType-Requisiten die folgenden möglichen Werte: Standard-Ziffernblock mit numerischer E-Mail-Adresse
In Ihrem Fall können Sie also keyboardType = 'Nummernblock' verwenden, um nur Zahlen zu akzeptieren. Dies beinhaltet nicht '.'
so,
ist das, was Sie in Ihrem Fall verwenden müssen.
Weitere Informationen finden Sie unter dem offiziellen Dokumentlink für TextInput: https://facebook.github.io/react-native/docs/textinput#keyboardtype
quelle
Erlaube Zahlen nur mit einem regulären Ausdruck
Möglicherweise möchten Sie mehr als eine Validierung haben
quelle
validations(value: string) { return /0/.test(value) && /^\d+$/.test(value) ? this.setState({ numColumns: value }) : false; }
Funktion zur Validierung der Eingabe:
Ich hoffe das ist hilfreich.
quelle
Eine freundliche Erinnerung an diejenigen, die auf das Problem gestoßen sind, dass "onChangeText" den TextInput-Wert unter iOS nicht wie erwartet ändern kann: Dies ist tatsächlich ein Fehler in ReactNative und wurde in Version 0.57.1 behoben. Siehe: https://github.com/facebook/react-native/issues/18874
quelle
Erste Lösung
Sie können verwenden
keyboardType = 'numeric'
für numerische Tastatur verwenden.Im ersten Fall sind Satzzeichen enthalten, z. B.: - . und -
Zweite Lösung
Verwenden Sie reguläre Ausdrücke, um Satzzeichen zu entfernen.
Bitte überprüfen Sie den Snack-Link
https://snack.expo.io/@vishal7008/1e004c
quelle
und onChanged-Methode:
quelle
"This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the property 'type' on a released/nullified synthetic event. This is set to null. If you must keep the original synthetic event around, use event.persist(). See fb>react-event-pooling for more information."
Ich weiß nicht, was ich damit anfangen soll. Kannst du helfen?Ich hatte das gleiche Problem in iOS, als ich das Ereignis onChangeText verwendete, um den Wert des vom Benutzer eingegebenen Textes zu aktualisieren. Ich konnte den Wert des TextInput nicht aktualisieren, sodass der Benutzer weiterhin die nicht numerischen Zeichen sehen konnte, die er eingegeben hatte.
Dies lag daran, dass sich der Status beim Drücken eines nicht numerischen Zeichens nicht ändern würde, da this.setState dieselbe Nummer verwenden würde (die Nummer, die nach dem Entfernen der nicht numerischen Zeichen übrig blieb) und der TextInput dann nicht erneut gerendert würde.
Die einzige Möglichkeit, dies zu lösen, bestand darin, das keyPress-Ereignis zu verwenden, das vor dem onChangeText-Ereignis auftritt, und darin setState zu verwenden, um den Wert des Status in einen anderen, völlig anderen Wert zu ändern und das erneute Rendern zu erzwingen, wenn das onChangeText-Ereignis aufgerufen wird . Nicht sehr zufrieden damit, aber es hat funktioniert.
quelle
quelle
Ich habe diese Funktion geschrieben, die ich als hilfreich empfand, um zu verhindern, dass der Benutzer etwas anderes eingeben kann, als ich zu akzeptieren bereit war. Ich habe auch benutzt
keyboardType="decimal-pad"
und meineonChangeText={this.decimalTextChange}
Der erste
if
Block ist die Fehlerbehandlung für den Fall, dass der Benutzer den gesamten Text löscht oder einen Dezimalpunkt als erstes Zeichen verwendet. Wenn er versucht, mehr als eine Dezimalstelle einzugeben, stellt der zweiteif
Block sicher, dass er als eingeben kann viele Zahlen, wie sie wollen, vor der Dezimalstelle, aber nur bis zu zwei Dezimalstellen nach dem Punkt.quelle
Verwenden eines RegExp zum Ersetzen von Nicht-Ziffern. Achten Sie darauf, dass der nächste Code Ihnen die erste Ziffer gibt, die er gefunden hat. Wenn der Benutzer einen Absatz mit mehr als einer Nummer (xx.xx) einfügt, gibt Ihnen der Code die erste Nummer. Dies hilft, wenn Sie etwas wie Preis wollen, nicht ein Handy.
Verwenden Sie dies für Ihren onTextChange-Handler:
quelle
Dies funktioniert nicht unter IOS, setState -> Rendern -> ändert den Text nicht, kann aber andere ändern. Die Texteingabe kann ihren Wert bei textOnChange nicht selbst ändern.
Übrigens, das funktioniert gut auf Android.
quelle
Ich habe eine Komponente erstellt, die dieses Problem löst:
https://github.com/amirfl/react-native-num-textinput
quelle
Sie können nicht numerische Zeichen mit Regex entfernen
quelle
Hier ist meine andere einfache Antwort, um nur Zahlen im Textfeld mit regulären Ausdrücken zu akzeptieren.
quelle
Versuchen Sie dies nur für die Dezimal- / Gleitkommazahl
}}
quelle