Question

我正在尝试建立付款界面。在编写此代码后，在到期日期输入无法输入任何内容。当您键入键盘数字时，在文本输入中不会输入任何内容。屏幕上也没有任何错误。我写了2个代码块。第一个是卡号的功能，第二个功能块是输入到期日期。我在另一个问题上找到的那些功能得到答案。这是代码：

 constructor() {
  super()
  this.state = {
    isReady: false
  }
}

componentDidMount() {
  this.setState({
    isReady: true
  })
}
onChange(text) {
    let newText = '';
    let numbers = '0123456789';

    for (var i = 0; i < text.length; i++) {
        if ( numbers.indexOf(text[i]) > -1 ) {
            newText = newText + text[i];
        }
    }
    this.setState({myNumber: newText})
}
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 (
    <Image style={styles.image} source={require('../img/cover.jpg')}
  >


         <Content style={styles.content}>

            <Form>
              <Item >
                <Icon active name='card'/>
                <Input keyboardType='numeric' maxLength={16} placeholder='Card Number'
                onChangeText = {(text)=> this.onChange(text)}
      value = {this.state.myNumber}/>
      </Item>

      <Grid>
      <Row>
      <Col>

              <Item style={{ marginBottom:10}}>
                <Icon active name='calendar' />
                <Input keyboardType='numeric' placeholder='MM/YY' 
                value = {this.formatFunction(cardExpiry)}
       onChangeText={this.inputToValue.bind(this)}/>
              </Item>
              </Col>
              <Col>

                      <Item style={{ marginBottom:10}}>
                        <Icon active name='lock' />
                        <Input maxLength={3} secureTextEntry={true}  placeholder='CVV'/>
                      </Item>
                      </Col>
              </Row>
              </Grid>

如何解决这个问题？

Answer 1

如果你看这一行：

//if the input has more than 5 characters don't set the state
if(inputText.length < 6){

您将获得答案;）您的输入值来自状态，但您不会更新它以使其不会更新。作为测试，尝试将正确的字符串粘贴到其中，这应该有效。

要解决此问题，您有两种选择： 1）始终更新cardExpiry状态，但在您的州中设置其他isExpiryValid标志，并使用它来显示错误等。

2）添加其他状态值，例如cardExpiryInputValue，它将在更改文本上更新，您的输入将获得该值，但仅在值有效时设置cardExpiry，然后您可以将其用作模型价值。（尽管此解决方案似乎过于复杂以用于验证目的）

当尝试输入文本输入时，没有输入任何内容（其信用卡到期输入）

1 个答案: