redux-form中handleSubmit未获值，表单通过URL提交内容

嘿，我之前也踩过类似的坑，结合你的描述，这问题大概率是两个核心原因导致的，咱们一步步来排查解决：

1. 阻止HTML表单的默认提交行为 #

你看到URL里带表单参数，说明浏览器触发了默认的HTML表单GET提交，这会直接跳转页面，打断redux-form的handleSubmit流程，自然拿不到表单值。

解决方法很简单：

• 确保你的表单使用redux-form提供的handleSubmit来处理提交，它本身会自动阻止默认行为，但有时候封装组件或自定义逻辑可能会绕过这个，所以可以手动在提交回调里再加一层保险：

  const handleFormSubmit = (values, dispatch, event) => {
    // 手动阻止默认提交，防止页面跳转
    event.preventDefault();
    // 这里处理你的业务逻辑，比如发请求
    console.log('表单值:', values);
  };
  
  // 渲染表单时，确保onSubmit绑定的是redux-form的handleSubmit
  <form onSubmit={handleSubmit(handleFormSubmit)}>
    {/* 你的表单组件 */}
    <button type="submit">提交</button>
  </form>
  

• 注意：如果用Material-UI的Button组件，一定要设置type="submit"，不然它不会触发form的onSubmit事件。

2. 检查Material-UI组件的封装是否正确 #

这是新手适配redux-form和Material-UI时最容易踩的坑：封装的组件没有正确传递redux-form注入的input属性，导致redux-form无法追踪表单值，最终handleSubmit拿到的就是undefined。

正确的封装示例（以TextField为例）：

import TextField from '@material-ui/core/TextField';

// 封装适配redux-form的TextField
const ReduxTextField = ({ 
  input, 
  label, 
  meta: { touched, error }, 
  ...restProps 
}) => (
  <TextField
    label={label}
    // 必须传递redux-form的input属性
    value={input.value}
    onChange={input.onChange}
    onBlur={input.onBlur}
    // 处理校验提示
    error={touched && !!error}
    helperText={touched && error}
    // 传递其他自定义属性
    {...restProps}
  />
);

// 然后在表单里这样用：
<Field
  name="firstName"
  component={ReduxTextField}
  label="First Name"
/>

重点是要把input对象里的value、onChange、onBlur都传递给Material-UI的输入组件，redux-form正是通过这些属性来同步表单状态的。

3. 额外排查点 #

• 确认你的表单组件已经用reduxForm({ form: 'yourFormId' })高阶组件包裹，并且redux store里已经正确配置了redux-form的reducer（在rootReducer里加入form: formReducer）。
• 检查表单字段的name属性和initialValues里的键名是否完全一致，大小写也要匹配。
• 可以在封装的组件里打印input对象，看看是否有正确的value和onChange方法，确认redux-form已经成功注入了这些props。

按照上面的步骤排查，应该就能解决问题了！

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