React Native：16進数のカード番号をJavascriptでフォーマットするにはどうすればいいですか？

Question

React Nativeには、MM/YYと他の16桁のカード番号を受け取る2つの<TextInput/>があります。 MM/YYのための最初の入力で

、私が持っている：

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

と16桁のカード番号のために：有効期限については

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

、私はそれらを分割しようとし${cardMonth}/${cardYear}という値プロパティに格納しますが、テキストはむしろそうではなく、4桁の数字の後にスペースを追加するとカード番号入力にテキストが入力に表示されなくなります。 <のTextInput />のonChangeTextと値のプロパティと、次の処理に正しいアプローチだろう何

：ユーザーが<TextInput/>を入力し始めると、途中で/を示し

1. と最初の2桁を入力すると/の前に表示され、次の2つ後に表示されます。ユーザーが16桁のカード番号を入力し始めると、すべての4桁の数字で入力した後
2. は、自動的にスペースを配置します。

は、事前にありがとうと答えを受け入れる/アップ投票します。

Answer 1

ステート変数を使用してTextInputの値を更新する必要があります。テキストが変更されるたびに、変更を処理して状態を更新して、コンポーネント内の値を更新することができます。たとえば、次のことを試してください。

上記

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

、私はthis.state.cardExpiryするTextInputの値を変更しました。他のコンポーネントと同様のことができます。また、私はkeyboardType={'numeric'}を追加しました。これは基本的にユーザーに数字を入力できるだけのキーボードを提供することに注意してください。以下では、テキストの変更を処理して状態を更新する方法を説明します。

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

このコードを試して、ニーズに合わせて調整することはできますが、これは一般的な概念です。 16桁のフィールドにも同様の書式を適用できます.4桁ごとに状態を更新する前にスペースを追加します。どこ

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

を：それは元の質問の一部だったので

Answer 2

私は、取扱いカード番号を追加します

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