[英]How to make TextInput prefill in React Native app?
I have a TextInput component in my React Native app.我的 React Native 应用程序中有一个 TextInput 组件。 And i need to make the field is pre-populated with a mask of 408xx810xxx, 1-3 and 6-8 digits in the field, their change is prohibited to put for users.
我需要在字段中预先填充408xx810xxx的掩码,字段中的1-3和6-8位数字,禁止用户更改它们。 Can somebody recommend the best way how can i do it?
有人可以推荐最好的方法我该怎么做?
<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}
/>
I have created a minimal example which exactly recreates your use case, without using any third party lib.我创建了一个最小的示例,它完全重新创建了您的用例,而无需使用任何第三方库。
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("")})
}
}
render:使成为:
<View style={styles.container}>
<TextInput
value={this.state.value}
onChangeText={(text) => this.changeText(text)}
/>
</View>
https://snack.expo.io/Sym-2W8RH https://snack.expo.io/Sym-2W8RH
For pre-population, you can assign hardcoded masked value to the state this.state.value
in your constructor.对于预填充,您可以将硬编码掩码值分配给构造函数中的状态
this.state.value
。
And for masking I recommend you using this library:对于屏蔽,我建议您使用这个库:
https://github.com/react-native-community/react-native-text-input-mask
https://github.com/react-native-community/react-native-text-input-mask
using this library masking work something like this使用这个库屏蔽工作是这样的
<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]"}
/> />
The best decision that i have found to use react-native-masked-text library:我发现使用 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}
/>
You need just put property type to 'custom', and create a mask according https://github.com/benhurott/react-native-masked-text library, in my case it was like this:您只需将属性类型设置为“自定义”,并根据https://github.com/benhurott/react-native-masked-text库创建一个掩码,在我的情况下是这样的:
const accountMask = '40899810999999999999',
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.