React中关闭父模态框时重置子组件Formik表单初始值

问题场景 #

在React项目中使用Formik实现登录表单（子组件）并嵌套在Modal（父组件）中，关闭未提交的弹窗后再次打开，表单仍保留之前的输入值，需要在关闭Modal时重置Formik表单至初始状态。

解决方案 #

方案1：通过React Key强制组件重新挂载（最简单） #

利用React的key特性，当key值变化时，组件会被重新创建而非更新，Formik会自动使用初始值初始化表单。

修改Modal父组件（ModalAntComment）中Login组件的调用，添加key={modalLogin}：

<Login
  key={modalLogin} // 添加该行代码
  currentPath={location.pathname}
  changeModalLogin={changeModalLogin}
/>

每次modalLogin从false切换为true时，Login组件会重新渲染，Formik的initialValues会重新生效，表单自动重置为空。

方案2：调用Formik的resetForm方法 #

通过在子组件中暴露Formik的重置方法，在父组件关闭Modal时触发重置。

步骤1：在Login组件中暴露resetForm方法

使用forwardRef和useImperativeHandle，让父组件能调用子组件的重置方法：

// 导入所需钩子
import React, { forwardRef, useImperativeHandle } from 'react'
// ...其余导入保持不变

// 用forwardRef包裹组件
const Login = forwardRef(({ From, currentPath, changeModalLogin }, ref) => {
  const location = useLocation();
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: loginSchema,
    onSubmit: (values) => {
      // 原有提交逻辑保持不变
    }
  })

  // 向父组件暴露resetForm方法
  useImperativeHandle(ref, () => ({
    resetForm: () => formik.resetForm()
  }));

  // 原有return内容保持不变
})

export default Login

步骤2：在Modal父组件中调用重置方法

在ModalAntComment组件中创建ref，在Modal关闭时调用子组件的重置方法：

import React, { useState, useRef } from 'react'
// ...其余导入保持不变

function ModalAntComment({ modalLogin, changeModalLogin, From }) {
  const navigate = useNavigate();
  const location = useLocation();
  const loginRef = useRef(null); // 创建ref

  const handleOk = () => {
    if (From == 'plus-button') {
      navigate("/createPost")
    } else {
      navigate("/")
    }
  }

  return (
    <Modal
      title="Login Required"
      centered
      visible={modalLogin}
      onOk={handleOk}
      okText="Login"
      footer={null}
      bodyStyle={{
        height: "390px"
      }}
      onCancel={() => {
        // 先重置表单，再关闭弹窗
        loginRef.current?.resetForm();
        changeModalLogin(false);
      }}
      // 可选：弹窗完全关闭后再重置，避免视觉闪烁
      afterClose={() => {
        loginRef.current?.resetForm();
      }}
    >
      <div className='right__content'>
        <Login
          ref={loginRef} // 绑定ref
          currentPath={location.pathname}
          changeModalLogin={changeModalLogin}
        />
      </div>
    </Modal >
  )
}

export default ModalAntComment

方案3：监听Modal的visible状态 #

在Login组件中监听父组件传递的弹窗可见状态，当弹窗从显示变为隐藏时重置表单。

步骤1：修改Login组件，添加监听逻辑

import React, { useEffect } from 'react'
// ...其余导入保持不变

function Login({ From, currentPath, changeModalLogin, modalVisible }) { // 新增modalVisible props
  const location = useLocation();
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: loginSchema,
    onSubmit: (values) => {
      // 原有提交逻辑保持不变
    }
  })

  // 监听弹窗可见状态，关闭时重置表单
  useEffect(() => {
    if (!modalVisible) {
      formik.resetForm();
    }
  }, [modalVisible, formik.resetForm]);

  // 原有return内容保持不变
}

export default Login

步骤2：在Modal父组件中传递弹窗状态

<Login
  modalVisible={modalLogin} // 传递弹窗可见状态
  currentPath={location.pathname}
  changeModalLogin={changeModalLogin}
/>

总结 #

• 方案1最简单，无需修改子组件逻辑，适合大多数场景；
• 方案2适合需要精确控制重置时机的场景；
• 方案3通过状态监听实现，逻辑清晰直观。

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