我有一个父组件LoggedInHome
和一个子组件MainInput
。在LoggedInHome
中,我希望能够关注MainInput
中的TextInput
。在MainInput
中,我希望能够清除TextInput
。下面是我的设置:LoggedInHome
(父代):
export function LoggedInHome({ navigation }) {
const ref_input = useRef();
function focusInput() {
ref_input.current?.focus()
}
[More logic, including a call to focusInput - this does NOT work]
return (
...
<MainInput navigation={navigation} ref_input={ref_input} />
)
}
MainInput
:
const MainInput = forwardRef(function MainInput({ navigation }, ref_input) {
let swipeableRow: Swipeable;
const updateRef = (ref: Swipeable) => {
swipeableRow = ref;
};
[Logic where I call swipeableRow.close() - this works]
[Logic where I call ref_input?.current?.clear() - this does NOT work]
return (
<Swipeable
...
ref={updateRef}
...
>
<View>
<TextInput
...
ref={ref_input}
...
/>
</View>
</Swipeable>
);
我尝试严格按照forwardRef文档进行设置,但是ref_input
的所有用法都无法正常工作,在调试时,我注意到在子进程中,ref_input
为null,因此ref_input?.current
为null,而在父进程中,ref_input
只是{current: null}
。
我误解了转发引用的工作原理吗?
1条答案
按热度按时间5uzkadbs1#
做了几个改变,结合起来似乎起作用了。
第一个是this article,它是一个解决父级和子级都需要使用子级中的ref的方案,结果是必须在子级中声明一个ref,并显式地合并来自父级的ref和来自子级的ref。
仅此一项并没有解决问题。第二件事,令人惊讶的是,是不使用
forwardRef
。父组件代码与我上面的代码保持相同。子组件现在将ref_input
作为props的一部分。因此,简而言之,子组件代码的开头如下所示: