प्रतिक्रिया मूल: <TextInput/> के साथ प्रारूप कार्ड की समाप्ति कैसे करें?

Question

<TextInput/> का उपयोग कर प्रतिक्रियात्मक मूल में, मैं / बनाने की कोशिश कर रहा हूं, केवल <TextInput/> केंद्रित है, और यदि कोई अन्य इनपुट दर्ज किया गया है तो वहां रहेगा। वर्तमान में, प्रारूप MM/YY है, इसलिए जब उपयोगकर्ता तीसरा अंक टाइप करता है, तो यह / के बाद जाना होगा, और यदि उपयोगकर्ता वापस प्रेस करना था, तो यह / से पहले अंक हटा देगा।

तो पहले उल्लेखित करने के लिए सही दृष्टिकोण क्या होगा? धन्यवाद और उत्तर स्वीकार करना सुनिश्चित होगा। निम्नलिखित लेकिन लंबाई के साथ एक त्रुटि हो रही है, और यह केवल जोड़ रहा है / दो के बाद अंक दर्ज किया गया है

मैंने कोशिश की:

_changeCardExpiry(value) { 
    if (value.indexOf('.') >= 0 || value.length > 5) { 
     return; 
    } 

    if (value.length === 2 && this.state.cardExpiry.length === 1) { 
     value += '/' 
    } 

    //then update state cardExpiry 
    } 

    ... 

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

Answer 1

आप onChangeText से इस समारोह का उपयोग कर सकते हैं;

कन्स्ट्रक्टर के अंदर विधि को बांधना न भूलें;

this.fixCardText = this.fixCardText.bind(this)

fixCardText(text){ 
    if(text.length == 2 && this.state.text == 1){ 
    text += '/' 
    }else if(text.length == 2 && this.state.text.length == 3){ 
    text = text.substring(0 , text.length-1) 
    } 
    this.setState({text:text}) 
} 

अपने पाठ इनपुट की तरह होना चाहिए,

<TextInput 
    value = {this.state.text} 
    onChangeText={(text)=>{this.fixCardText(text)}} 
/> 

Answer 2

formattion में आप वास्तव में 3 कार्यों की जरूरत है एक, वास्तविक मूल्य फ़ॉर्मेट करने के लिए है दूसरा स्वरूपित मान वास्तविक मान को वापस परिवर्तित करने के लिए है और तीसरे की जाँच में प्रवेश किया इनपुट अब तक वैध या नहीं हो सकता है कि क्या के लिए आवश्यक है । उदाहरण के लिए दिनांक इनपुट इनपुट के लिए पत्र इनपुट को अवहेलना किया जाना चाहिए, लेकिन साथ ही 99 को अवहेलना किया जाना चाहिए क्योंकि यह एक महीने के लिए वैध इनपुट नहीं है। तो अपने विशिष्ट मामले के लिए निम्नलिखित संरचना (दोनों चेकों इस उदाहरण inputToValue समारोह में है कि क्या प्रवेश किया इनपुट वैध और सेट राज्य यह के अनुसार है) आप के लिए काम करना चाहिए:

formatFunction(cardExpiry = ""){ 
    //expiryDate will be in the format MMYY, so don't make it smart just format according to these requirements, if the input has less than 2 character return it otherwise append `/` character between 2nd and 3rd letter of the input. 
    if(cardExpiry.length < 2){ 
    return cardExpiry; 
    } 
    else{ 
    return cardExpiry.substr(0, 2) + "/" + (cardExpiry.substr(2) || "") 
    } 
} 

inputToValue(inputText){ 
    //if the input has more than 5 characters don't set the state 
    if(inputText.length < 6){ 
     const tokens = inputText.split("/"); 
     // don't set the state if there is more than one "/" character in the given input 
     if(tokens.length < 3){ 
      const month = Number(tokens[1]); 
      const year = Number(tokens[2]); 
      //don't set the state if the first two letter is not a valid month 
      if(month >= 1 && month <= 12){ 
       let cardExpiry = month + ""; 
       //I used lodash for padding the month and year with zero    
       if(month > 1 || tokens.length === 2){ 
        // user entered 2 for the month so pad it automatically or entered "1/" convert it to 01 automatically 
        cardExpiry = _.padStart(month, 2, "0"); 
       } 
       //disregard changes for invalid years 
       if(year > 1 && year <= 99){ 
        cardExpiry += year; 
       } 
       this.setState({cardExpiry}); 
      } 
     } 
    } 
} 

render(){ 
    let {cardExpiry} = this.state; 
    return <TextInput 
     value = {this.formatFunction(cardExpiry)} 
     onChangeText={this.inputToValue.bind(this)}/>; 
} 

Answer 3

नहीं पूर्ण समाधान है, लेकिन यह समान समस्या का हल - मास्किंग ब्लूटूथ पता
AB
AB:C
AB:CD:EF:GH:IJ:KL

/* 
Usage: 
import { TextInput } from '../utils/input' 
const MaskedTextInput = withMask(TextInput) 
<MaskedTextInput 
    placeholder="Printer address" 
    value={ printerId } 
    onChange={this.handlePrinterAddressChange} 
/> 
*/ 

import React, { Component } from 'react' 
import { View } from 'react-native' 

export const withMask = (WrappedComponent) => class Wrapper extends Component { 

    constructor(props) { 
    super() 
    this.state = { value: props.value } 
    } 

    onChange(event) { 
    let value = event.nativeEvent.text 
    const rawValue = event.nativeEvent.text.replace(/:/g, '') 

    if (rawValue) { 
     value = rawValue.match(/.{1,2}/g).join(':').toUpperCase() 
    } 

    this.setState({value}) 

    if (this.props.onChange) { 
     event.nativeEvent.text = value 
     this.props.onChange(event) 
    } 
    } 

    render() { 
    return <WrappedComponent 
     {...this.props} 
     onChange={(event) => this.onChange(event)} 
     value={this.state.value} 
    /> 
    } 

}