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

      【讨论】:

      • 太棒了!它实际上让我思考更多并修改了我自己的代码:)
      • 很好的答案!效果很好
      猜你喜欢
      • 1970-01-01
      • 2017-12-30
      • 1970-01-01
      • 1970-01-01
      • 2022-08-13
      • 2017-03-11
      • 1970-01-01
      • 2012-04-19
      相关资源
      最近更新 更多