反応ネイティブのテキスト入力フィールドで4文字後に自動的にスペースを取る

Question

テキスト入力フィールドにテキストを入力すると、自動的に4桁のスペースが必要になります。ここで

は、テキスト入力フィールドのための私のコードです：ここでは

handleCardNumber = (text) => { 
    this.setState({ cardNumber: text }) 
} 

<TextInput 
    ref="first" 
    underlineColorAndroid="transparent" 
    autoCapitalize="none" 
    style={styles.cardNumberTextInput} 
    placeholder="1234 1234 1234 1234" 
    placeholderTextColor="grey" 
    returnKeyType='next' 
    keyboardType = {'numeric'} 
    onChangeText={this.handleCardNumber} 
    onSubmitEditing={(event)=>{ 
    this.refs.second.focus(); 
}} 

は私のスクリーンショットです：

Answer 1

は、以下を使用してコードを置き換えます

handleCardNumber = (text) => { 
    let formattedText = text.split(' ').join(''); 
    if (formattedText.length > 0) { 
    formattedText = formattedText.match(new RegExp('.{1,4}', 'g')).join(' '); 
    } 
    this.setState({ cardNumber: formattedText }); 
    return formattedText; 
} 

はこれを追加しますあなたの入力コードの行に変更の状態の値を表示する：

value={this.state.cardNumber} 

JSデモ：（以上4桁を入力してください）

handleCardNumber = (text) => { 
 
     let formattedText = text.split(' ').join(''); 
 
     if (formattedText.length > 0) { 
 
     formattedText = formattedText.match(new RegExp('.{1,4}', 'g')).join(' '); 
 
     } 
 
     //this.setState({ cardNumber: text }); 
 
     console.log(formattedText) 
 
     return formattedText; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="number" onchange="handleCardNumber(this.value)" >