reactjs forwardRef导致功能组件中的参考电流为空

6rqinv9w  于 2023-02-22  发布在  React
关注(0)|答案(1)|浏览(110)

我有一个父组件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}
我误解了转发引用的工作原理吗?

5uzkadbs

5uzkadbs1#

做了几个改变,结合起来似乎起作用了。
第一个是this article,它是一个解决父级和子级都需要使用子级中的ref的方案,结果是必须在子级中声明一个ref,并显式地合并来自父级的ref和来自子级的ref。
仅此一项并没有解决问题。第二件事,令人惊讶的是,是不使用forwardRef。父组件代码与我上面的代码保持相同。子组件现在将ref_input作为props的一部分。因此,简而言之,子组件代码的开头如下所示:

export function MainInput ({ navigation, ref_input }) {
    const innerRef = React.useRef(null)

    const combinedRef = useCombinedRefs(ref_input, innerRef)
    ...

相关问题