Javascript “反应本机动态”；这"；

我做了一些搜索，找不到任何相关的样本，可能我的搜索关键字不正确

onFocusChangeText = (value,from) =>{
    let newState = {};
    newState[`otpinput_${from}`] = value;
    this.setState(newState,()=>{
      this.[`otpinput_${from + 1}`].focus(); // issue here
    });
}

<TextInput ref={(r) => this.otpinput_1 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,1)} />
<TextInput ref={(r) => this.otpinput_2 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,2)} />
<TextInput ref={(r) => this.otpinput_3 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,3)} />
<TextInput ref={(r) => this.otpinput_4 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,4)} />
<TextInput ref={(r) => this.otpinput_5 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,5)} />
<TextInput ref={(r) => this.otpinput_6 = r} style={styles.otpitem} keyboardType="number-pad" />

我正在做一个OTP组件，我做了一些研究，并成功地为每个OTP输入设置了动态状态，但是我希望在输入字段向上时调用

focus（）

方法，我希望动态地为更少且干净的代码，代码如下。[

otpinput_${from+1}

]；这是不对的

onFocusChangeText = (value,from) =>{
    let newState = {};
    newState[`otpinput_${from}`] = value;
    this.setState(newState,()=>{
      this.[`otpinput_${from + 1}`].focus(); // issue here
    });
}

<TextInput ref={(r) => this.otpinput_1 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,1)} />
<TextInput ref={(r) => this.otpinput_2 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,2)} />
<TextInput ref={(r) => this.otpinput_3 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,3)} />
<TextInput ref={(r) => this.otpinput_4 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,4)} />
<TextInput ref={(r) => this.otpinput_5 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,5)} />
<TextInput ref={(r) => this.otpinput_6 = r} style={styles.otpitem} keyboardType="number-pad" />

onFocusChangeText=（值，从）=>{
让newState={}；
newState[`otpinput_${from}`]=值；
this.setState（newState，（）=>{
这是。[`otpinput_${from+1}`].focus（）；//这里的问题
});
}
this.otpinput_1=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，1）}/>
this.otpinput_2=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，2）}/>
this.otpinput_3=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，3）}/>
this.otpinput_4=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，4）}/>
this.otpinput_5=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，5）}/>
this.otpinput_6=r}style={styles.otpitem}keyboardType=“数字键盘”/>

我回答自己的问题，希望能帮助其他ppl：

• 创建一个数组

• 将每个引用放在数组索引中

this.otpinput[uU=[]

onFocusChangeText = (value,from) =>{
    let newState = {};
    newState[`otpinput_${from}`] = value;
    this.setState(newState,()=>{
      this.otpinput_[from + 1].focus(); // fixed
    });
}

<TextInput ref={(r) => this.otpinput_[1] = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,1)} />
<TextInput ref={(r) => this.otpinput_[2] = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,2)} />
<TextInput ref={(r) => this.otpinput_[3] = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,3)} />
<TextInput ref={(r) => this.otpinput_[4] = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,4)} />
<TextInput ref={(r) => this.otpinput_[5] = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,5)} />
<TextInput ref={(r) => this.otpinput_[6] = r} style={styles.otpitem} keyboardType="number-pad" />

onFocusChangeText=（值，从）=>{
让newState={}；
newState[`otpinput_${from}`]=值；
this.setState（newState，（）=>{
this.otpinput_u1;[from+1].focus（）；//已修复
});
}
this.otpinput_u[1]=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，1）}/>
this.otpinput_u[2]=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，2）}/>
this.otpinput_u[3]=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，3）}/>
this.otpinput_u[4]=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（text）=>this.onFocusChangeText（text，4）}/>
this.otpinput_U5]=r}style={styles.otpitem}keyboardType=“数字键盘”onChangeText={（文本）=>this.onFocusChangeText（文本，5）}/>
this.otpinput_u6]=r}style={styles.otpitem}keyboardType=“数字键盘”/>

它不需要额外的库，而只传递数字作为参数

onChangeText={(text)=> this.onFocusChangeText(text,1)}

<TextInput ref={(r) => this.otpinput_1 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,1,this.otpinput_2)} />
<TextInput ref={(r) => this.otpinput_2 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,2,this.otpinput_3)} />


//Do this for all other input.


您需要直接将下一个输入的
ref
作为参数传递

onChangeText={(text)=> this.onFocusChangeText(text,1)}

<TextInput ref={(r) => this.otpinput_1 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,1,this.otpinput_2)} />
<TextInput ref={(r) => this.otpinput_2 = r} style={styles.otpitem} keyboardType="number-pad" onChangeText={(text)=> this.onFocusChangeText(text,2,this.otpinput_3)} />


//Do this for all other input.


我很困惑。当您键入输入时，您希望该输入获得焦点吗？这是默认设置，它将自动获得焦点，对吗？@ravibagul91下一个输入焦点，因为它是otpy。你应该有一些条件来正确聚焦下一个输入焦点吗？输入文本长度=6这样的条件，对吗？下一次输入聚焦的条件是什么？@ravibagul91不确定您是否阅读了我的代码，我记下了这个。[
otpinput_${from+1}
].focus（）；设置状态完成后，将自动聚焦下一个输入