求助：新增驾驶员信息页面返回后字段未自动清空刷新

嘿，这个问题我之前搞项目的时候也遇到过！本质上就是表单数据没有在页面离开或重新进入时被重置，导致旧数据残留。给你几个不同技术栈下的解决方案，你按需选就行：

• 页面卸载/离开时主动重置数据
  这是最直接的方式，在用户离开页面（点击返回按钮）时，把表单数据恢复到初始空状态。

  • Vue 示例：

    // 假设你的表单数据存在driverForm响应式对象中
    import { onUnmounted } from 'vue';
    import { useRouter } from 'vue-router';
    
    const driverForm = ref({
      driverLicence: '',
      // 其他字段默认空值
    });
    const initialDriverForm = {...driverForm.value};
    
    // 组件卸载时重置
    onUnmounted(() => {
      driverForm.value = {...initialDriverForm};
    });
    
    // 或者用路由守卫，在离开该路由时重置
    const router = useRouter();
    router.beforeRouteLeave((to, from, next) => {
      driverForm.value = {...initialDriverForm};
      next();
    });
    

  • React 示例：

    import { useState, useEffect } from 'react';
    
    const initialDriverForm = {
      driverLicence: '',
      // 其他字段默认空值
    };
    
    function AddDriverPage() {
      const [driverForm, setDriverForm] = useState(initialDriverForm);
    
      // 组件卸载时重置
      useEffect(() => {
        return () => {
          setDriverForm(initialDriverForm);
        };
      }, []);
    }
    

• 进入页面时强制重置数据
  不管之前有没有残留数据，只要用户进入这个新增页面，就强制把表单恢复到初始状态，适合需要确保每次进入都是空白表单的场景。

  • Vue 路由守卫示例：

    router.beforeRouteEnter((to, from, next) => {
      next(vm => {
        // vm是当前组件实例，直接重置表单数据
        vm.driverForm = {...vm.initialDriverForm};
      });
    });
    

  • React 监听路由变化示例：

    import { useLocation } from 'react-router-dom';
    
    // ...
    const location = useLocation();
    useEffect(() => {
      // 每次进入该页面就重置表单
      setDriverForm(initialDriverForm);
    }, [location.pathname]); // 监听路由路径变化
    

• 原生JS场景解决方案
  如果是纯原生JS开发，直接操作DOM清空表单即可：

  // 给返回按钮绑定事件，点击时先清空表单再跳转
  document.getElementById('goBackBtn').addEventListener('click', () => {
    // 方式1：调用表单的reset方法（需要表单有id）
    document.getElementById('driverForm').reset();
    // 方式2：逐个清空输入框
    // document.querySelectorAll('#driverForm input, #driverForm textarea').forEach(el => el.value = '');
    // 跳转首页
    window.location.href = '/home';
  });
  
  // 或者在页面加载时自动清空
  window.addEventListener('load', () => {
    document.getElementById('driverForm').reset();
  });
  

小提示：如果你的项目用了全局状态管理（比如Vuex、Redux），那还要同步重置状态中的表单数据，不然状态里的旧数据会重新渲染到表单上哦！

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