javascript - 在 React Native 中创建 OTP 系统并自动聚焦下一个字段

Question

您好我想创建一个 otp 类型系统。我有一个名为 LoginScreen2 的组件，我想在其中使用该组件。我想使用参考和自动对焦功能。但它不起作用。它给了我不确定的。请看这个。这是我的 Otp 组件

import React, { createRef, useRef } from 'react';

import {View, StyleSheet} from 'react-native';
import colors from '../config/colors';
import AppText from './AppText';
import InputText from './InputText';
import { create } from 'apisauce';

function OtpBoxes({style, onChangeText1, onChangeText2, onChangeText3, onChangeText4}) {

    let box2 = useRef(null);


    const customChange = () => {
        console.log(box2)
    }

    return (
        <View style={[styles.container, style]}>
            <InputText 
            style={styles.box} 
            textStyle={styles.boxText} 
            maxLength={1} 
            keyboardType="number-pad" 
            onChangeText={customChange}
            autoFocus
            />

            <InputText
            style={styles.box} 
            textStyle={styles.boxText} 
            maxLength={1} 
            keyboardType="number-pad" 
            onChangeText={onChangeText2} 
            ref={box2} />

            <InputText 
            style={styles.box} 
            textStyle={styles.boxText} 
            maxLength={1} 
            keyboardType="number-pad" 
            onChangeText={onChangeText3} />

            <InputText 
            style={styles.box} 
            textStyle={styles.boxText} 
            maxLength={1} 
            keyboardType="number-pad" 
            onChangeText={onChangeText4} />
        </View>
    );
}


const styles = StyleSheet.create({
    box: {
        height: 50,
        width: 50,
        backgroundColor: colors.lighter,
        marginTop: 20,
        marginBottom: 20,
    },
    boxText: {
        textAlign: 'center',
        width: '100%',
        height: '100%',
    },
    container: {
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
})


export default OtpBoxes;

这里的 onChangeText1 等是用于我的 LoginScreen1 中的 useState 的函数，用于查看用户在字段中输入的值。我创建了一个名为 customChange 的函数，我想在这里做自动对焦的事情，然后在这里调用 onChangeText1 等函数。我尝试创建 useRef 挂钩，但 box2 给我的所有对象都是当前未定义值的对象。

输入文本如下：

import React, {useRef, useEffect} from 'react';
import { View, StyleSheet, TextInput, Platform } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import colors from '../config/colors';

function InputText({ icon, style, textStyle, ...otherProps }) {

    return (
        <View style={[styles.container, style]}>
            {icon && <MaterialCommunityIcons name={icon} size={20} color={colors.light} style={styles.icon} /> }
            <TextInput style={[styles.textInput, textStyle]} {...otherProps} />
        </View>
    );
}


const styles = StyleSheet.create({
    container: {
        backgroundColor: colors.lighter,
        borderRadius: 25,
        flexDirection: 'row',
        width: '100%',
        padding: 10,
        marginVertical: 10,
        alignItems: 'center',
    },
    icon: {
        marginRight: 10,
    },
    textInput: {
        width: '100%',
        fontSize: 18,
        fontFamily: Platform.OS === 'android' ? 'Roboto' : 'Avenir',
    },
})


export default InputText;

在这里，我确实用 {...otherprops} 传播了其他人，但无论我做什么，我的 useRef 都无法正常工作。请帮助我想在 OtpBoxes 组件中执行下一个自动对焦操作并管理 LoginScreen2 组件中的状态。

标签： javascriptreactjsreact-nativeexpouse-ref