如何创建MM/YY的输入掩码?

Question

我想为信用卡到期日期创建一个React Native输入组件。

我认为我应该输入掩码应该是MM/YY的格式。我不确定自动填充与autoCompleteType="cc-exp"和textContentType="creditCardNumber"。

如果没有库，只有javascript/typescript，怎么能做到这一点?

InputCreditCardExpirationDate.tsx

// React Hooks: State
const [value, setValue] = useState<string>('');
const formatMMY = (string: string): string => {
// HOW?
};
// On Change
const onChange = (text: string): void => {
// MM/YY
text = formatMMY(text);
if (text.length >= 1) {
// Set State
setValue(text);
// Props: On Change Text
onChangeText(text);
}
};
return (
<Input
value={value}
placeholder={placeholder || 'Expires'}
label={label ? label : 'Expires'}
keyboardType="numeric"
onChangeText={onChange}
autoCompleteType="cc-exp" // Android Only
textContentType="creditCardNumber" // iOS Only
maxLength={7}
darkMode={darkMode || false}
/>
);

Answer 1

我通过使用库"react-native-mask -text"解决了这个问题

import {TextInputMask} from 'react-native-mask -text'

…

<TextInputMask
placeholder="mm / yy"
style={styles.inputLine} 
placeholderTextColor="#4D4D4D" 
refInput={ref =>{setExDateRef(ref)}}
includeRawValueInChangeText={true}
onChangeText={(maskedText) => { setCardExpiry(maskedText); }}
value={cardExpiry} 
type={'custom'}
options={{mask: '99/99'}}
keyboardType={'numeric'}
onSubmitEditing={() => {cvvRef.focus() }}
returnKeyType="next"
/>