Question

我进行了一些搜索，找不到任何相关的样本，也许我的搜索关键字不正确。

我正在做一个OTP组件，我做了一些研究并为每个OTP输入成功设置了动态状态，但是我希望在输入字段向上时调用focus()方法，我想为<强大而简洁的代码，下面是代码。[otpinput_${from + 1}。focus（）;不正确。

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" />

Answer 1

我回答了我自己的问题，希望对其他人有帮助：

创建数组
将每个引用放入数组索引

this.otpinput_ = [];

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" />

那，不需要额外的库

Answer 2

而不是仅传递数字作为参数，

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

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

<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.

您的功能是

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

React-Native动态“ this”

2 个答案: