移动焦点自动阵营天然

Question

我有这样一段代码创建一串输入字段（其可以容纳一个字符的最大值）：

renderInputs() { 
    var products = [] 
    // some code that generates a randomNumber 
    for (let p = 0; p < randomNumber; p++){ 
     products.push (<TextInput defaultValue="" maxLength={1} key={p} onChangeText={(text) => this.handleChange(text, p)}></TextInput>); 
    } 
    return products 
} 

我想要的焦点从一个输入字段自动移动下一个用户填写一个输入字段

Answer 1

您需要存储对所有输入的引用。拥有它们，你可以专注于它们中的任何一个。输入内容改变后，您决定是否移动到下一个输入。

这是代码，写入时没有运行并测试它 - 它有可能包含错别字，甚至无法运行。但这个想法在那里...

class ParentComponent extends Component { 
    inputRefs = [] 

    keepInputRef = (index) => { 
     this.inputRefs[index] = null; 
     return (ref) => { 
      this.inputRefs[index] = ref; 
     } 
    } 

    handleChange(text, p) { 
     // do what you need. 
     // then... 
     // NOTE: `if` condition is completely off, won't work... Replace it with condition valid for your needs. 
     if (something) { 
      const nextInput = this.inputRefs[p + 1]; 
      if (nextInput) { 
       nextInput.focus() 
      } 
     } 
    } 

    renderInputs() { 
     var products = []; 

     for (let p = 0; p < randomNumber; p++){ 
      products.push (
       <TextInput key={p} ref={this.keepInputRef(p)} defaultValue="" maxLength={1} onChangeText={(text) => this.handleChange(text, p)}></TextInput> 
      ); 
     } 

     return products 
    } 
}