React+Formik嵌套子表单条件隐藏时如何通用清空对应字段值

我们可以借助Formik内置的上下文钩子，结合状态变化监听，实现通用的可复用条件子表单组件，同时支持简单场景和复杂嵌套场景的自定义清空逻辑。

核心改造思路 #

• 用useFormikContext获取Formik实例，无需手动透传表单操作props
• 新增可选的fieldsToClear参数，简单场景下直接传入要清空的字段名数组即可
• 新增可选的onClear回调，复杂嵌套子表单可以自定义清空逻辑，灵活性更高
• 监听toggle状态变化，仅在组件从显示切换为隐藏时执行清空操作，避免首次渲染误触发

改造后的OptionalFeature组件代码 #

import { useFormikContext } from 'formik';
import { useEffect, useRef } from 'react';

const OptionalFeature = ({
  toggle,
  children,
  fieldsToClear = [],
  onClear
}) => {
  const { setValues, values } = useFormikContext();
  // 存储上一次的toggle状态，避免首次渲染触发清空
  const prevToggleRef = useRef(toggle);

  useEffect(() => {
    // 仅当从显示切换为隐藏时触发清空
    if (prevToggleRef.current && !toggle) {
      if (typeof onClear === 'function') {
        // 自定义清空逻辑，传入当前values和setValues供外部操作
        onClear(values, setValues);
      } else {
        // 默认清空指定字段
        setValues(prev => {
          const newValues = {...prev};
          fieldsToClear.forEach(field => {
            newValues[field] = '';
            // 嵌套字段可自行扩展递归赋值逻辑，也可引入lodash的set方法处理
          });
          return newValues;
        }, false); // 第二个参数设为false可避免触发清空后的校验，不需要可删除
      }
    }
    prevToggleRef.current = toggle;
  }, [toggle, fieldsToClear, onClear, setValues, values]);

  if (toggle) {
    return <div>{children}</div>
  } else {
    return null;
  }
}

业务侧使用示例 #

简单场景：直接指定要清空的字段 #

<OptionalFeature
  toggle={!values.anonymous}
  fieldsToClear={['fullname']}
>
  <input
    id="fullname"
    placeholder="Enter your full name"
    type="text"
    value={values.fullname}
    onChange={handleChange}
  />
</OptionalFeature>

复杂嵌套场景：自定义清空逻辑 #

如果子表单是嵌套的对象结构，比如userInfo.fullname、userInfo.phone，可以用onClear自定义处理：

<OptionalFeature
  toggle={!values.anonymous}
  onClear={(values, setValues) => {
    setValues(prev => ({
      ...prev,
      userInfo: {
        ...prev.userInfo,
        fullname: '',
        phone: ''
      },
      // 可按需处理任意复杂的字段清空逻辑
    }))
  }}
>
  {/* 嵌套子表单内容 */}
  <input
    id="userInfo.fullname"
    name="userInfo.fullname"
    value={values.userInfo.fullname}
    onChange={handleChange}
  />
  <input
    id="userInfo.phone"
    name="userInfo.phone"
    value={values.userInfo.phone}
    onChange={handleChange}
  />
</OptionalFeature>

方案优势 #

• 完全通用，和业务逻辑解耦，不需要修改原有子表单的代码
• 兼顾简单场景和复杂嵌套场景的需求
• 符合React和Formik的开发规范，无侵入式hack逻辑
• 清空逻辑由使用侧按需定义，灵活性极高

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