如何使用 react-native 在 textInput 字段中自动使用'/'（斜杠）答案

【问题标题】：How to automatically takes a '/'(slash) in textInput field using react-native如何使用 react-native 在 textInput 字段中自动使用'/'（斜杠）
【发布时间】：2021-05-14 09:37:48
【问题描述】：

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

这是我的文本输入

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

【问题讨论】：

标签： android ios reactjs react-native expo

【解决方案1】：

上述解决方案的问题：

它在文本更改后添加一个斜杠即当用户键入第一个年份的数字（到期的第三位数字，例如 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!');
     }
   }}
 />

【讨论】：

【解决方案2】：

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

我使用useState hook 来管理我的功能组件中的状态。

  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，它就会检查任何现有的“/”，如果没有，它会在第二个字符之后添加一个。

【讨论】：

太棒了！它实际上让我思考更多并修改了我自己的代码:)
很好的答案！效果很好