如何使TextInput预填充在反应本地应用？
如何使TextInput预填充在反应本地应用？
提问于 2019-12-17 07:40:02
我的中有一个TextInput组件。我需要使字段是预先填充的408x810xxx，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}
/>回答 3
Stack Overflow用户
回答已采纳
发布于 2019-12-17 07:54:38
对于预填充，可以将硬编码掩码值分配给构造函数中的状态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) // +1 (123) 456-78-90
console.log(extracted) // 1234567890
}}
mask={"+1 ([000]) [000] [00] [00]"}/>
Stack Overflow用户
发布于 2019-12-17 08:01:03
我已经创建了一个很小的示例，它准确地重新创建了您的用例，而不使用任何第三方库。
代码
changeText:
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>工作演示
Stack Overflow用户
发布于 2019-12-19 06:16:37
我发现最好的选择是使用react本机蒙面文本库：
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',页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59369588
复制相关文章
相似问题
腾讯云开发者
