繁体   English   中英

React Native:如何选择以前的文本输入

[英]React Native: How to select previous Text Input

我已经定义了代码,专注于下一个TextInput字段

 <View>
     <TextInput
         ref="1"
         maxLength = {1}
         keyboardType={"numeric"}
         onChangeText={(pC1) => this.focusNextField('2',pC1)}
         value={this.state.pC1}
     />
     <TextInput
         ref="2"
         maxLength = {1}
         keyboardType={"numeric"}
         onChangeText={(pC2) => this.focusNextField('3',pC2)}
         value={this.state.pC2}
     />
     <TextInput
          ref="3"
          maxLength = {1}
          keyboardType={"numeric"}
          onChangeText={(pC3) => this.focusNextField('',pC3)}
          value={this.state.pC3}
      /> 
  </View>

以下是为正向传输文本输入光标而编写的函数。 但是如何以相反的顺序进行实现。也就是说,按退格键(键盘)

  focusNextField(nextField,pinCode) {
      if(nextField=="2"){
        if(pinCode!=''){
          this.state.pC1=pinCode; // Set value for PC1
          this.refs[nextField].focus();//Goes to TextInput whose ref == 2
        }else{
          this.state.pC1='';
          nextField="1";
          this.refs[nextField].focus();
        }
      }else if(nextField=="3"){
        if(pinCode!=''){
          this.state.pC2=pinCode; // Set value for PC2
          this.refs[nextField].focus();//Goes to TextInput whose ref == 3
        }else{
          this.state.pC2='';
          nextField="2";
          this.refs[nextField].focus();
        }
      }else if(nextField==""){
        if(pinCode!=''){
          this.state.pC3=pinCode; // Set value for PC3
        }else{
          this.state.pC3='';
          nextField="3";
          this.refs[nextField].focus();
        }
      }
    this.forceUpdate(); //Update the Component
  }

在上面的代码中,我可以从一个TextInput向前移动到另一个。
我的问题是:如果删除TextInput数据,如何关注以前的TextInput

我假设您正在寻找的行为是:如果输入不为空,请关注next,如果有,如果输入为空,请关注先前(如果有)。 我建议您通过声明映射来降低函数的复杂性,如下所示:

focusNextField (currentField, pinCode) {
    const mapping = {
        '1': {
            variable: 'pC1',
            next: '2'
        },
        '2': {
            variable: 'pC2',
            prev: '1',
            next: '3'
        },
        '3': {
            variable: 'pC3',
            prev: '2'
        },
    };
    this.state[mapping[currentField].variable] = pinCode || '';
    if (pinCode) {
        if (mapping[currentField].next) {
            this.refs[mapping[currentField].next].focus();
        }
    } else {
        if (mapping[currentField].prev) {
            this.refs[mapping[currentField].prev].focus();
        }
    }

    this.forceUpdate();
}

您需要在标记中进行的唯一更改是将当前字段发送到方法而不是下一个字段。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM