Reactjs 在React Native中自动移动焦点

我有一段代码，它创建了一组最多可以保存一个字符的输入字段：

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
}

---

我希望每当用户填写一个输入字段时，焦点自动从一个输入字段移动到下一个输入字段

您需要存储对所有输入的引用。拥有它们，你可以专注于其中任何一个。输入内容更改后，您可以决定是否移动到下一个输入

这是一段没有运行和测试的代码——很有可能包含拼写错误，甚至没有运行。但是想法是存在的

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