입력시 아무 것도 입력하지 않습니다. (신용 카드 만료 입력)

Question

지불 화면을 구축하려고합니다. 그리고이 코드를 작성한 후에는 만료 날짜에 아무 것도 입력 할 수 없습니다. 키보드 숫자를 입력 할 때 텍스트 입력에 아무 것도 입력되지 않습니다. 또한 화면에 오류가 없습니다. 나는 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) cardExpiryInputValue 같은 추가 상태 값을 추가 1) 항상 cardExpiry 상태를 업데이트 할 수 있지만 귀하의 상태에 추가 isExpiryValid 플래그를 설정 등 오류를 표시하기 위해 사용을하는 것입니다 변경 텍스트에서 업데이트되고 입력 값은 해당 값을 갖지만 값이 유효한 경우에만 cardExpiry을 설정 한 다음 모델 값으로 사용할 수 있습니다. (비록이 솔루션은 유효성 검사 목적으로 과도하게 복잡해 보였지만)