（mm/yy）モデルを含む有効期限TextInputでこのコードを動作させるにはどうすればよいですか？

Question

有効期限TextInputを含むチェックアウトフォームを作成したいと思います。これはこのように見えます（MM/YY）。最初の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

使用あなたの問題を処理するために、このコードは：

constructor(props) { 
    super(props); 
    this.state = { text: '' }; 
    } 

    handleChange = (text) => { 
    let textTemp = text; 
    if (textTemp[0] !== '1' && textTemp[0] !== '0') { 
     textTemp = ''; 
    } 
    if (textTemp.length === 2) { 
     if (parseInt(textTemp.substring(0, 2)) > 12) { 
     textTemp = textTemp[0]; 
     } else if (this.state.text.length === 1) { 
     textTemp += '/'; 
     } else { 
     textTemp = textTemp[0]; 
     } 
    } 
    this.setState({text: textTemp}) 
    } 

    render() { 
    return (
     <TextInput 
     keyboardType={'numeric'} 
     onChangeText={this.handleChange} 
     value={this.state.text} 
     maxLength={5} 
     /> 
    ); 
    }