Как правильно настроить/использовать ref для тематического функционального компонента в typescript + react native

Основная цель: у меня есть два TextInput, и я хочу имитировать обратный щелчок по первому textInput, чтобы установить фокус на следующий textInput.

Начнем с настройки (используя typescript)

У меня есть тематический TextInput с некоторыми настройками цвета, как показано ниже. Я настраиваю/использую forwardRef для передачи ссылки, если она предоставлена. Из того, что я мог прочитать, это кажется правильным путем. но, может быть, это неправильно.

export type TextInputProps = ThemeProps & RNTextInput['props'];

export const TextInput = React.forwardRef<RNTextInput, TextInputProps>((props, ref) => {
...
return <RNTextInput style={[{ backgroundColor, color }, style]} {...otherProps} ref={ref} />;
}

Теперь на моем экране я использую этот объект, и после завершения ввода первого ввода я хотел установить фокус на этом. Код выглядит так..

const inputSecound = React.useRef<typeof TextInput>();
const handleFirstTextComplete = () => {
    inputSecound.current.focus() // This does not work
}
...
<TextInput onSubmitEditing={handleFirstTextComplete} ...>
<TextInput ... ref={inputSecound}> //This also complains

Любая идея, как добиться этого правильно в функциональных компонентах + пользовательских компонентах + машинописном тексте.

Образец закуски доступен здесь, если вы хотите увидеть полную настройку в действии. https://snack.expo.io/@varesh.tapadia/useref-and-useforwardref


react-native typescript react-forwardref use-ref
person Varesh    schedule 15.02.2021    source источник
comment
Пожалуйста, примите ответ, если он решил ваш вопрос   -  person user2369284    schedule 16.02.2021

Ответы (1)


arrow_upward
1
arrow_downward

Это должно решить вашу проблему.

interface CustomInputProps {
    handleCompletion: () => void;
}

const CustomInput = React.forwardRef<HTMLInputElement, CustomInputProps>((props, ref) => {
    return <input ref={ref}/>;
});

const Parent = () => {
    const secondInputRef = useRef<HTMLInputElement>(null);
    const handleCompletion = () => {
        secondInputRef?.current?.focus();
    }
    return (<>
        <CustomInput handleCompletion={handleCompletion} />
        <CustomInput ref={secondInputRef} handleCompletion={() => {}} />
    </>);
}
person user2369284    schedule 16.02.2021