[英]React Native: How to select previous Text Input
I have defined code as to focus on next TextInput
field 我已经定义了代码,专注于下一个
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>
Following are the functions written for text input cursor shifting in forward direction. 以下是为正向传输文本输入光标而编写的函数。 But how to make the implementation in reverse order.That is, by pressing backspace(keypad)
但是如何以相反的顺序进行实现。也就是说,按退格键(键盘)
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
}
In the above code I am able to move forward from one TextInput
to another. 在上面的代码中,我可以从一个
TextInput
向前移动到另一个。
My question is: how can I focus on the previous TextInput
if I remove TextInput
data? 我的问题是:如果删除
TextInput
数据,如何关注以前的TextInput
?
I assume that the behavior you are looking for is : If input not empty, focus on next if there is any, if input is empty, focus on previous if there is any. 我假设您正在寻找的行为是:如果输入不为空,请关注next,如果有,如果输入为空,请关注先前(如果有)。 I suggest that you reduce the complexity of your function by declaring a mapping as follows :
我建议您通过声明映射来降低函数的复杂性,如下所示:
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();
}
The only change you need to do in your markup is sending the current field to the method instead of the next field. 您需要在标记中进行的唯一更改是将当前字段发送到方法而不是下一个字段。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.