Focus un élément spécifique donné sa clé

Question

Je développe une petite application pour deviner un mot. Au lieu d'un seul TextInput je veux donner des indices sur le nombre de caractères que le mot a et peut-être même commencer avec certains caractères déjà révélés.

Pour ce faire, je crée un TextInput pour chaque caractère, puis je définis le premier TextInput avec autofocus=true.

Ce dont j'ai besoin, c'est que lorsque l'utilisateur entre un caractère dans le TextInput actuel la mise au point passe à la suivante.

Pour créer les entrées, j'affecte un nombre entier consécutif à chaque touche et passe cette clé à la fonction handleKeyPress. Ce dont j'ai besoin dans cette fonction est quelque chose qui focalise le TextInput avec une clé égale à i + 1.

Mon code:

handleKeyPress(i, input_text) { 
    // Here I need to focus the TextInput with key===(i+1) 
    const text = this.state.text; 
    text[i] = input_text; 
    this.setState({ 
     text: text, 
    }); 
} 

render() { 
    let ToRender = []; 
    let n= 5; // number of characters 

    // First Input has autofocus set to true 
    ToRender.push(
     <TextInput 
     key={0} 
     size="1" 
     autofocus={true} 
     value={this.state.text[0]} 
     onChangeText={(text) => this.handleKeyPress(0, text)} 
     /> 
    ); 

    // generate the rest of the Inputs 
    for (let i=1; i<n; i++) { 
     ToRender.push(
     <TextInput 
      key={i} 
      size="1" 
      value={this.state.text[i]} 
      onChangeText={(text) => this.handleKeyPress(i, text)} 
     /> 
    ); 
    } 

    return(
     <View style={styles.container}> 
     {ToRender.map((e) => e)} 
     </View> 
    ); 
} 

Comment puis-je me concentrer un élément spécifique étant donné qu'il est la clé?

Answer 1

Ok, j'ai réussi à le résoudre.

D'abord, je dois référencer les éléments par le champ ref au lieu de key, et d'y accéder en utilisant this.refs[i].focus() pour focaliser l'élément ième:

<TextInput 
    key={i} 
    ref={i} 
    size="1" 
    autofocus={true} 
    value={this.state.text[i]} 
    onChangeText={(text) => this.handleKeyPress(i, text)} 
/> 

Puis dans la fonction handleKeyPress que je peux faire:

handleKeyPress(i, input_text) { 
    this.refs[i+1].focus(); 
}