React Native:如何使用<TextInput />进行格式卡过期？

Question

在React Native使用中<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

在格式化中，您实际上需要 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 2

您可以从 onChangeText 使用此函数；

不要忘记在构造函数中绑定方法；

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

fixCardText(text){
  if(text.length == 2 && this.state.text.length == 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)}}
/>