在將焦點輸入到下一個文本輸入后

Question

假設我有3個帶有TextInput視圖。

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

注意ref={'cell_'+i} ，其中i等於0.2。 現在，當我在cell_0內鍵入一個char時，如何聚焦（移動光標）到下一個TextInput上。 cell_1嗎？

Answer 1

試試這個代碼：

<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();
};