이동 초점이 자동으로 반응 원주민

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