React Native Stack导航返回时如何重置表单输入值

核心思路 #

借助React Navigation的useFocusEffect钩子监听Home页面的聚焦状态，当从Result页面返回、Home页面重新获得焦点时，调用react-hook-form的reset方法清空所有表单值。

具体修改步骤 #

1. 导入必要钩子 #

在Home组件中添加useFocusEffect和useCallback的导入：

import { useNavigation, useFocusEffect } from "@react-navigation/native";
import { useCallback } from "react";

2. 获取表单重置方法 #

从useForm的返回值中解构出reset方法：

const { 
    control,
    handleSubmit,
    formState: { errors },
    reset, // 新增：获取表单重置方法
} = useForm({
    resolver: yupResolver(schema),
});

3. 添加聚焦监听逻辑 #

在组件中添加useFocusEffect，每次Home页面聚焦时自动重置表单：

// 监听页面聚焦，触发表单重置
useFocusEffect(
    useCallback(() => {
        reset();
    }, [reset])
);

修改后的Home组件核心代码片段 #

export function Home() {
    const { navigate } = useNavigation();
 
    const { 
        control,
        handleSubmit,
        formState: { errors },
        reset,
    } = useForm({
        resolver: yupResolver(schema),
    });

    useFocusEffect(
        useCallback(() => {
            reset();
        }, [reset])
    );

    const onSubmit = (data: any) => {
        console.log(data)
        navigate('Result')
    };
    
    // 其余原有代码保持不变
}

可选替代方案 #

如果希望在跳转到Result页面时就重置表单（而非返回时），可修改onSubmit方法：

const onSubmit = (data: any) => {
    console.log(data)
    reset(); // 跳转前清空表单
    navigate('Result')
};

注：此方案仅在提交跳转时生效，若用户从其他路径回到Home页面，表单不会自动重置，因此推荐第一种监听页面聚焦的方案覆盖场景更全面。

内容的提问来源于stack exchange，提问作者Ming