在将焦点输入到下一个文本输入后

Question

let say I have 3 views with TextInput inside it.

<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled} />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled} />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled} />
</View>

notice ref={'cell_'+i} where i equal to 0..2. now when I type in a char inside cell_0 how to focus (move the cursor) to the next TextInput ie. cell_1 ?

Answer 1

Try this code :

<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled}
        onSubmitEditing={() => this.focusNextField('cell_' + (i+1))}
        />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled}
        onSubmitEditing={() => this.focusNextField('cell_' + (i+1))}
        />
</View>
<View style={styles.row}>
    <TextInput
        ref={'cell_'+i}
        maxLength={1}
        spellCheck={false}
        style={styles.chewy}
        onKeyPress={this._onInputFilled}
        />
</View>

onSubmitEditing:

focusNextField = nextField => {
   this.refs[nextField].focus();
};