React中Formik调用resetForm后输入字段未清空问题

问题分析 #

你的代码存在几个关键问题导致重置表单后输入框内容未清空：

• 初始值未明确声明：initialValues为空对象，未定义username和password属性。重置时formik.values.username变为undefined，React受控组件的value为undefined时会被视为非受控组件，无法同步状态更新。
• resetForm 参数冗余：手动传递{ values: {} }会导致重置后状态属性缺失，不如直接复用initialValues可靠。
• 参数拼写错误：saveValues(value)中的参数应为values，而非value。
• 按钮触发方式不规范：通过onClick调用handleSubmit不符合HTML表单提交的标准逻辑。

修正后的代码 #

export default function CandidateForm() {
    const formik = useFormik({
        // 明确声明每个字段的初始空字符串
        initialValues: {
            username: '',
            password: ''
        },
        validationSchema: candidateSchema,
        onSubmit: (values, { resetForm }) => {
            saveValues(values);
            // 直接调用resetForm，默认重置到initialValues
            resetForm();
        },
    });

    return (
        <form onSubmit={formik.handleSubmit}>
            <input
                value={formik.values.username}
                id='username'
                name='username'
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
            />
            <input
                value={formik.values.password}
                id='password'
                name='password'
                onChange={formik.handleChange}
                onBlur={formik.handleBlur}
            />
            {/* 使用submit类型按钮，自动触发表单提交事件 */}
            <button type="submit">Submit</button>
        </form>
    )
} 

生效原因说明 #

1. 明确初始值：initialValues包含username和password的空字符串，确保Formik状态始终存在这些属性，重置后输入框能同步获取空值。
2. 简化resetForm调用：resetForm()默认将表单恢复到initialValues，避免手动构造重置值时的属性遗漏问题。
3. 规范提交逻辑：type="submit"按钮配合表单的onSubmit事件，确保Formik的状态更新和重置逻辑正确执行。

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