React Native: Wie formatieren Sie die Zahlung in mm/yy und die 16-stellige Kartennummer in Javascript?

Question

In React Native habe ich zwei <TextInput/>, eine, die MM/YY und die andere 16-stellige Kartennummer empfängt.

Im ersten Eingang für MM/JJ, ich habe:

<TextInput 
    onChangeText={this._handlingCardExpiry.bind(this)} 
    placeholder='MM/YY' 
    value={cardExpiry} 
    /> 

Und für die 16-stellige Kartennummer:

<TextInput 
    onChangeText={this._handlingCardNumber.bind(this)} 
    placeholder='0000 0000 0000 0000' 
    value={cardNumber} 
    /> 

Für den Ablauf, ich versuchte, sie zu zerlegen und Speichern in der Wert-Eigenschaft als ${cardMonth}/${cardYear}, aber der Text wäre nicht einmal lieber, und das Hinzufügen von Leerzeichen nach jeweils 4 Ziffern der Kartennummer Eingabe verursachen Texte nicht in der Eingabe erscheinen.

Was wäre der richtige Ansatz sein, die folgenden mit den < TextInput- /> 's onChangeText und Wert Eigenschaften Handhabung:

1. Wenn ein Benutzer in <TextInput/> Eingabe beginnt, eine / in der Mitte zeigen und Eingabe der ersten zwei Ziffern würde vor dem / und den nächsten zwei nach erscheinen.
2. Wenn ein Benutzer in 16-stellige Kartennummer eingeben beginnt, automatisch Raum platzieren, nachdem alle 4 Ziffern eingegeben.

Vielen Dank im Voraus und stimmen auf/die Antwort akzeptieren.

Answer 1

Sie sollten eine Statusvariable verwenden, um Ihren Wert TextInput zu aktualisieren, sodass Sie bei jeder Textänderung die Änderung bearbeiten und den Status aktualisieren können, wodurch der Wert innerhalb der Komponente wie gewünscht aktualisiert wird. Zum Beispiel, versuchen Sie Folgendes:

<TextInput 
    onChangeText={this._handlingCardExpiry.bind(this)} 
    placeholder='MM/YY' 
    keyboardType={'numeric'} 
    value={this.state.cardExpiry} 
    /> 

Oben habe ich den Wert von TextInput geändert this.state.cardExpiry zu sein. Sie können etwas Ähnliches für die andere Komponente tun. Beachten Sie auch, dass ich keyboardType={'numeric'} hinzugefügt habe, die dem Benutzer im Wesentlichen eine Tastatur bietet, die nur die Eingabe von Zahlen ermöglicht. Im Folgenden zeige ich Ihnen, wie Sie mit einer Textänderung umgehen und den Status aktualisieren.

_handlingCardExpiry(text) { 
    if (text.indexOf('.') >= 0 || text.length > 5) { 
     // Since the keyboard will have a decimal and we don't want 
     // to let the user use decimals, just exit if they add a decimal 
     // Also, we only want 'MM/YY' so if they try to add more than 
     // 5 characters, we want to exit as well 
     return; 
    } 

    if (text.length === 2 && this.state.cardExpiry.length === 1) { 
     // This is where the user has typed 2 numbers so far 
     // We can manually add a slash onto the end 
     // We check to make sure the current value was only 1 character 
     // long so that if they are backspacing, we don't add on the slash again 
     text += '/' 
    } 

    // Update the state, which in turns updates the value in the text field 
    this.setState({ 
     cardExpiry: text 
    }); 
} 

Sie können diesen Code ausprobieren und an Ihre Bedürfnisse anpassen, aber dies ist das allgemeine Konzept. Sie können Ihrem 16-stelligen Feld eine ähnliche Formatierung zuweisen, wobei Sie vor dem Aktualisieren des Status alle vier Stellen ein Leerzeichen hinzufügen.

Answer 2

ich die Handhabung Kartennummer hinzufügen werden, da sie Teil der ursprünglichen Frage:

_handlingCardNumber(number) { 
    this.setState({ 
    cardNumber: number.replace(/\s?/g, '').replace(/(\d{4})/g, '$1 ').trim() 
    }); 
} 

wo:

<TextInput 
    onChangeText={(text) => this._handlingCardNumber(text)} 
    placeholder='0000 0000 0000 0000' 
    value={this.state.cardNumber} 
    />