如何在 React Native 应用程序中预填充 TextInput？

Posted 2023-04-18

【中文标题】如何在 React Native 应用程序中预填充 TextInput？

【英文标题】：How to make TextInput prefill in React Native app?

【发布时间】：2020-04-09 16:21:47

【问题描述】：

我的 React Native 应用程序中有一个 TextInput 组件。而且我需要使该字段预先填充有 408xx810xxx、1-3 和 6-8 位的掩码，禁止将其更改给用户。有人可以推荐最好的方法吗？

          <TextInput
            style=[SS.input, styles.input]
            placeholder=props.placeholder placeholderTextColor=theme.inputPlaceholder
            underlineColorandroid='transparent' editable=!props.disabled
            keyboardType=props.keyboardType || 'default' autoCapitalize=capitalize
            keyboardAppearance=props.keyboardAppearance
            autoCorrect=autoCorrect selection=state.position
            secureTextEntry=this.state.guarded
            value=this.state.value
            onChangeText=this._onChangeText
            onFocus=this._onFocus onBlur=this._onBlur
            autoFocus=props.autoFocus
            multiline=props.multiline
            maxLength=props.maxLength
            onContentSizeChange=onContentSizeChange
          />

【问题讨论】：

你能实现 4 个文本字段，其中 2 个用于不可编辑，另外 2 个用于可编辑。并将它们绑定在一个视图中。

非常感谢您的好主意！我会努力的！

【参考方案1】：

我创建了一个最小的示例，它完全重新创建了您的用例，而不使用任何第三方库。

代码

更改文本：

changeText(text)
// we do not allow the deletion of any character
if (text.length >= 11)
  var tmp = text.split("")
  // check if there are still is a X value in string 
  const currentIndex = text.indexOf('X');
  if (currentIndex) 
    //if a X was found, replace it with the newest character
    tmp[currentIndex] = tmp[11];
    //remove latest character again
    tmp.pop();
  
  this.setState(value: tmp.join(""))
  

渲染：

  <View style=styles.container>
     <TextInput
      value=this.state.value
      onChangeText=(text) => this.changeText(text)
     />
  </View>

工作演示

https://snack.expo.io/Sym-2W8RH

【讨论】：

Tim 非常感谢您的出色回答?但是如果我需要 20 个字符？

我认为它对用户不友好，即在 UI 上

@Tejas 当然这不是一个完美的解决方案，它只是一个工作示例。它提供了一个原始想法，操作员如何通过他/她自己实现这些目标。

@jocoders 你需要用20 替换我代码中的每个11。我将不胜感激/将其标记为已接受的答案。

@jocoders 顺便说一句，您可以通过单击答案旁边的复选图标（在投票计数器下方）来接受答案。通过接受答案，您还将获得额外的声誉。

【参考方案2】：

对于预填充，您可以在构造函数中将硬编码的掩码值分配给状态 this.state.value。

对于屏蔽，我建议你使用这个库：

https://github.com/react-native-community/react-native-text-input-mask

使用这个库掩码可以像这样工作

<TextInputMask
  refInput=ref =>  this.input = ref 
  onChangeText=(formatted, extracted) => 
  console.log(formatted) // [phone]
  console.log(extracted) // 1234567890
 
  mask="+1 ([000]) [000] [00] [00]"

/>

【讨论】：

非常感谢丹麦人?

【参考方案3】：

我发现使用 react-native-masked-text 库的最佳决定：

import  TextInputMask  from 'react-native-masked-text';

            <TextInputMask
              type='custom' 
              options=mask: accountMask 
              maxLength=20
              customTextInput=InputText 
              customTextInputProps=this._loginMaskProps
              value=vm.checkingAccount keyboardType='number-pad'
              placeholder=accountPlaceholder 
              onChangeText=vm.changeCheckingAccount
            />

您只需将属性类型设置为“自定义”，并根据https://github.com/benhurott/react-native-masked-text 库创建一个掩码，在我的情况下是这样的：

 const accountMask = '40899810999999999999',