入力時に何も入力されていない（クレジットカードの有効期限入力）

Question

支払い画面を作成しようとしています。そして、このコードを書いた後、有効期限が切れても何も入力することはできません。キーボード番号を入力すると、テキスト入力に何も入力されません。また、画面にエラーはありません。私は2つのコードブロックを書く。最初のものはカード番号の機能であり、2番目の機能ブロックは有効期限の入力です。私は他の質問の答えで見つけたそれらの機能。コードは次のとおりです。

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

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

    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){ 

、あなたの答えを持っています。）あなたの入力の値が状態から来ているが、それは更新されませんので、あなたはそれを更新しません。テストとして正しい文字列を貼り付けてみてください。そうすればうまくいくはずです。次の2つのオプション持ってこれに対処するには

： 1）常にcardExpiry状態を更新しますが、あなたの状態で追加isExpiryValidフラグを設定し、エラーを表示するためにそれを使用するなど

2）なるcardExpiryInputValueのような追加の状態値を追加します。変更テキストで更新され、入力値はその値を取得しますが、値が有効な場合にのみcardExpiryを設定し、モデル値として使用することができます。 （ただし、このソリューションは検証の目的では複雑すぎるようですが）