在react-native中的文本输入字段中自动占用4个字母后的空格

Question

如果我在文本输入字段中输入文本，则自动在4位数之后占用空格。

这是我的文本输入字段代码：

handleCardNumber = (text) => {
    this.setState({ cardNumber: text })
}

<TextInput
    ref="first"
    underlineColorAndroid="transparent"
    autoCapitalize="none"
    style={styles.cardNumberTextInput}
    placeholder="1234 1234 1234 1234"
    placeholderTextColor="grey"
    returnKeyType='next'
    keyboardType = {'numeric'}
    onChangeText={this.handleCardNumber}
    onSubmitEditing={(event)=>{
    this.refs.second.focus();
}}

以下是我的截图：

Answer 1

用以下内容替换您的代码：

handleCardNumber = (text) => {
  let formattedText = text.split(' ').join('');
  if (formattedText.length > 0) {
    formattedText = formattedText.match(new RegExp('.{1,4}', 'g')).join(' ');
  }
  this.setState({ cardNumber: formattedText });
  return formattedText;
}

在输入代码中添加此行以显示更改状态值：

value={this.state.cardNumber}

JS演示:(输入4位以上）

handleCardNumber = (text) => {
      let formattedText = text.split(' ').join('');
      if (formattedText.length > 0) {
        formattedText = formattedText.match(new RegExp('.{1,4}', 'g')).join(' ');
      }
      //this.setState({ cardNumber: text });
      console.log(formattedText)
      return formattedText;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" onchange="handleCardNumber(this.value)" >