React与Formik高阶组件传值：如何在handleSubmit中使用外部状态

嘿，我来帮你搞定这个Formik的问题！其实核心是分两种情况来处理——要么把你自定义的inputValue传入Formik的handleSubmit，要么直接用Formik自带的values来管理表单状态（更推荐后者，因为能避免状态不一致的坑）。

一、把自定义的inputValue传入handleSubmit #

如果你确实有特定场景需要自己维护inputValue状态，想要在Formik的提交逻辑里用到它，有两个简单的实现方式：

1. 自定义提交函数，合并数据后传递 #

不要直接用Formik的handleSubmit绑定到表单，而是自己写一个提交处理函数，把Formik的values和你的inputValue合并后再传给Formik的提交方法：

const MyForm = ({ handleSubmit: formikHandleSubmit, values, handleChange }) => {
  const [inputValue, setInputValue] = useState('');

  const handleCustomSubmit = (e) => {
    e.preventDefault();
    // 合并Formik的表单数据和你的自定义inputValue
    const submitData = {
      ...values,
      customInput: inputValue
    };
    // 把合并后的数据传给Formik的handleSubmit
    formikHandleSubmit(submitData, e);
  };

  return (
    <form onSubmit={handleCustomSubmit}>
      {/* 你的自定义输入框 */}
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="自定义输入"
      />
      {/* Formik管理的其他表单字段 */}
      <input
        type="text"
        name="username"
        value={values.username}
        onChange={handleChange}
        placeholder="用户名"
      />
      <button type="submit">提交</button>
    </form>
  );
};

const EnhancedForm = withFormik({
  initialValues: { username: '' },
  handleSubmit: (submitData, { setSubmitting }) => {
    // 这里就能拿到合并后的submitData，包含你的inputValue
    console.log('提交数据:', submitData);
    // 处理你的业务逻辑，比如发请求
    setTimeout(() => {
      alert('提交完成！');
      setSubmitting(false);
    }, 1000);
  }
})(MyForm);

2. 通过组件props传递给withFormik #

如果inputValue是从父组件传递过来的，那在withFormik的handleSubmit里，可以通过第二个参数的props属性直接获取：

const EnhancedForm = withFormik({
  initialValues: { username: '' },
  handleSubmit: (values, { setSubmitting, props }) => {
    // 这里的props就是表单组件接收的所有外部props，包括inputValue
    console.log('Formik表单数据:', values);
    console.log('自定义inputValue:', props.inputValue);
    // 后续处理逻辑
    setSubmitting(false);
  }
})(MyForm);

// 父组件使用时
const ParentComponent = () => {
  const [inputValue, setInputValue] = useState('');
  return <EnhancedForm inputValue={inputValue} />;
};

二、正确操作Formik的Values（更推荐） #

其实Formik的核心价值就是帮你统一管理表单状态，所以如果你的inputValue是表单的一部分，完全没必要自己维护状态，直接用Formik的values就好，操作起来更省心：

1. 让Formik接管输入状态 #

定义表单字段时，用Formik提供的values、handleChange、handleBlur等props，不需要自己的useState：

const MyForm = ({ values, handleChange, handleBlur, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="customInput" // 这个name要和initialValues里的键对应
        value={values.customInput}
        onChange={handleChange}
        onBlur={handleBlur}
        placeholder="输入内容"
      />
      <button type="submit">提交</button>
    </form>
  );
};

const EnhancedForm = withFormik({
  initialValues: { customInput: '' }, // 初始化字段值
  handleSubmit: (values, { setSubmitting }) => {
    // 这里直接用values.customInput就是用户输入的值
    console.log('表单数据:', values);
    // 处理你的业务逻辑
    setTimeout(() => {
      alert(`你输入的是：${values.customInput}`);
      setSubmitting(false);
    }, 1000);
  }
})(MyForm);

2. 手动修改Formik的values（特定场景下） #

如果需要在某些场景下手动更新表单值（比如按钮点击、接口返回数据后），可以用Formik提供的setFieldValue方法：

const MyForm = ({ values, handleChange, handleBlur, handleSubmit, setFieldValue }) => {
  const handleManualUpdate = () => {
    // 手动设置customInput字段的值
    setFieldValue('customInput', '手动设置的内容');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="customInput"
        value={values.customInput}
        onChange={handleChange}
        onBlur={handleBlur}
      />
      <button type="button" onClick={handleManualUpdate}>手动修改输入值</button>
      <button type="submit">提交</button>
    </form>
  );
};

总结 #

• 如果你的inputValue是表单的一部分，优先用Formik的values管理，能避免自己维护状态带来的不一致问题；
• 如果确实需要独立的状态，通过自定义提交函数合并数据，或者通过组件props传递的方式，就能在handleSubmit里拿到它了。

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