我在我的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}
/>
对于预填充,您可以在构造函数中将硬编码的掩码值分配给状态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]"}
/>
我已经创建了一个最小的示例,该示例可以完全重新创建您的用例,而无需使用任何第三方库。