使用 react-native 在 textInput 字段中自動采用“/”（斜杠）

Question

如果我在文本輸入字段中輸入文本，那么它會自動在月和年之間使用“/”（斜線）。

這是我的代碼：

  handleMMYYYY = (text) => {
     this.setState({ MMYYYY: text })
  }
 <TextInput
       underlineColorAndroid="transparent"
       autoCapitalize="none"
       placeholder="MM/YYYY"
       style={{textAlign:'center'}}
       placeholderTextColor="grey"
       returnKeyType='next'
       onChangeText={this.handleMMYYYY}
       onSubmitEditing={(event)=>{
       this.refs.third.focus();
       }}
      />

這是我的截圖：

Answer 1

一種方法可能是這樣

 handleMMYYYY = (text) => {
      formated = text;
      if(formated.length==2){
        //formated = text +'/';
        if(this.state.getCardDate.indexOf('/') == -1){
          formated = text +'/';
        }

      }
    this.setState({ getCardDate: formated })    
}

不靈活，但我能想到的最簡單的。

Answer 2

已經有很多反應組件可以做到這一點。 這稱為屏蔽輸入。

試試這個； https://www.npmjs.com/package/react-input-mask