react-native - 文本输入 : when maxLength is full automatically focus next field

Question

我的应用程序在使用 TextInput 输入银行卡号码时遇到问题(错误是因为用户未输入所有 16 位数字)。

所以我想在 4 个 TextInput 上剪切 CB 编号，并在填充 4 位数字后自动聚焦到下一个字段。 (正如已经在网络应用程序中看到的那样)

但是当我聚焦下一个字段时，即使状态设置正确，当前字段也变为空。

你知道我该如何做到这一点还是不可能吗？

即。请参阅此示例中的 onChangeText(实际上是到期日期):

<TextInput
    ref='card_exp_date_mm'
    style={[styles.inputTxt, {width: 30, flex: 0}]}
    value={this.state.cardExpDateMonth}
    keyboardType='numbers-and-punctuation'
    placeholder='MM'
    returnKeyType='next'
    clearTextOnFocus={false}
    autoCorrect={false}
    placeholderTextColor={Constants.placeholderTextColor}
    maxLength={2}
    enablesReturnKeyAutomatically={true}
    blurOnSubmit={false}
    onChangeText={text => {
      this.setState({cardExpDateMonth: text})
      //console.log('onChangeText', this.refs.card_exp_date_mm)
      if(text && text.length == 2){
        this.refs.card_exp_date_aa.focus();
      }
    }}
    onSubmitEditing={()=>this.refs.card_exp_date_aa.focus()}/>

Answer 1

你可以做类似in this example的事情:

this.refs[nextField].focus()

您确实应该检查一下这个示例，它涵盖了您正在搜索的内容。