如何为typescript+；中的主题功能组件正确设置/使用ref；自然反应

主要目标：我有两个TextInput，我想模拟返回，单击第一个TextInput将焦点设置为下一个TextInput

让我们从设置开始（使用typescript）

我有一个主题文本输入和一些颜色设置，如下所示。我设置/使用forwardRef传递ref（如果提供）。就我所能读到的，这似乎是正确的方法。但也许这是错误的

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

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

导出类型TextInputProps=ThemeProps&RNTextInput['props']；
export const TextInput=React.forwardRef（（props，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

const inputSecound=React.useRef（）；
常量handleFirstTextComplete=（）=>{
inputSecound.current.focus（）//这不起作用
}
...
//这也引起了抱怨

你知道如何在functional components+custom components+typescript中正确实现这一点吗

如果您想看到完整的安装过程，可以在这里找到一个小吃样本。

---

这应该可以解决您的问题

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

接口CustomInputProps{
手工完成：（）=>无效；
}
const CustomInput=React.forwardRef（（props，ref）=>{
返回；
});
常量父项=（）=>{
const secondInputRef=useRef（null）；
常量handleCompletion=（）=>{
secondInputRef？当前？焦点（）；
}
返回(
{}} />
);
}

如果回答解决了您的问题，请接受回答