如何在React Native应用中使TextInput预先填充?

问题描述 投票:3回答:2

我在我的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}
          />
javascript function react-native mask textinput
2个回答
1
投票

对于预填充,您可以在构造函数中将硬编码的掩码值分配给状态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]"}

/>


0
投票

我已经创建了一个最小的示例,该示例可以完全重新创建您的用例,而无需使用任何第三方库。

© www.soinside.com 2019 - 2024. All rights reserved.