如何使用 react-native 在 textInput 字段中自动使用“/”（斜杠）

Question

我正在尝试添加功能以输入 mm/yy 字段，以便当用户输入 2 位数字时，会自动添加斜杠“/”。

这是我的文本输入

<TextInput
placeholder="mm/yy"
placeholderTextColor={Colors.BLACK_TRANSPARENT_50}
keyboardType="number-pad"
maxLength={4}
returnKeyType="done"
style={styles.secondtextinput}
></TextInput>

Answer 1

我只是在我的应用程序中做了这样的事情，在电话号码中添加一个“-”:) 这可能是一个迂回的修复，但这就是我所做的：

我使用useState挂钩在我的功能组件中管理 state。

  const [date, setDate] = useState("");
                
  <TextInput
    onChangeText={(text) => {
      setDate(
        text.length === 3 && !text.includes("/")
          ? `${text.substring(0, 2)}/${text.substring(2)}`
          : text
      );
    }}
    placeholder="mm/yy"
    placeholderTextColor={Colors.BLACK_TRANSPARENT_50}
    keyboardType="number-pad"
    maxLength={5}
    returnKeyType="done"
    style={styles.secondtextinput}
    value={date}
  />

我将maxLength更改为 5 以说明“/”。 当用户输入日期时，一旦它达到 3 的长度，它就会检查任何现有的“/”，如果没有，它会在第二个字符之后添加一个。

Answer 2

上述解决方案的问题：

它在文本更改后添加一个斜线，即当用户键入年份的第一个数字（到期的第三个数字，例如 10/2）时，将在新添加的数字和前一个数字之间插入一个斜线，即当用户完成时随着 2 的插入，斜线将自动放置在 0 和 2 之间。

要获得更优雅和强大的解决方案，您可以使用此解决方案：

创建组件范围变量：

let allowChangeText = true;

然后为到期日期文本创建一个挂钩：

const [expiryDate, setExpiryDate] = useState('');

稍后将组件用作：

<TextInput
   value={expiryDate}
   maxLength={5}
   keyboardType="number-pad"
   onKeyPress={({ nativeEvent }) => {
     if (nativeEvent.key == 'Backspace' && expiryDate.length == 3) {
        allowChangeText = false;
        setExpiryDate(expiryDate.substring(0, 2));
     } else {
        allowChangeText = true;
     }
   }}
   onChangeText={(text: string) => {
     if (allowChangeText) {
        setExpiryDate(text.length === 2 && text.indexOf('/') == -1
           ? `${text}/`
           : text
        );
     } else {
        console.log('change text is not of use!');
     }
   }}
 />