移動焦點自動陣營天然

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