如何从父组件提交Redux Form（远程提交）

嘿，我来帮你搞定从父组件提交Redux Form的标准做法！你之前用隐藏submit按钮的方式虽然能跑通，但确实不是Redux Form官方推荐的实现方式，这里有两种更规范的常用方法：

方法一：通过Ref获取表单实例触发提交 #

这是最直观的方式，核心思路是让父组件拿到子表单组件的实例，直接调用Redux Form注入的handleSubmit方法：

子表单组件（WorkExperienceForm.js） #

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

class WorkExperienceForm extends Component {
  // 自定义字段渲染方法
  renderField = ({ input, label, type }) => (
    <div>
      <label>{label}</label>
      <input {...input} type={type} />
    </div>
  );

  render() {
    return (
      <div>
        <Field name="company" component={this.renderField} label="公司名称" />
        <Field name="position" component={this.renderField} label="职位" />
        {/* 不用再放隐藏的submit按钮啦 */}
      </div>
    );
  }
}

// 用reduxForm高阶组件包装，指定唯一表单标识
export default reduxForm({
  form: 'workExperience'
})(WorkExperienceForm);

父组件 #

import React, { useRef } from 'react';
import WorkExperienceForm from './WorkExperienceForm';

const ParentComponent = () => {
  // 创建ref用来引用表单组件
  const formRef = useRef(null);

  // 定义表单提交后的处理逻辑
  const handleSubmitForm = (formValues) => {
    console.log('提交的表单数据:', formValues);
    // 这里可以写API请求等业务逻辑
  };

  return (
    <div>
      {/* 将ref传递给子表单 */}
      <WorkExperienceForm ref={formRef} />
      {/* 父组件的提交按钮，点击时调用表单的handleSubmit */}
      <button 
        onClick={() => formRef.current.handleSubmit(handleSubmitForm)()}
      >
        提交工作经历表单
      </button>
    </div>
  );
};

export default ParentComponent;

如果你用的是类组件的父组件，把useRef换成React.createRef()，调用方式改成this.formRef.current.handleSubmit(...)()就可以啦。

方法二：通过状态驱动提交 #

如果你的场景需要更灵活的状态控制，可以用父组件传递状态的方式触发提交：

父组件 #

import React, { useState } from 'react';
import WorkExperienceForm from './WorkExperienceForm';

const ParentComponent = () => {
  // 维护一个状态，标记是否需要触发提交
  const [shouldSubmit, setShouldSubmit] = useState(false);

  const handleFormSubmit = (formValues) => {
    console.log('提交的数据:', formValues);
    // 提交完成后重置状态，避免重复提交
    setShouldSubmit(false);
  };

  return (
    <div>
      <WorkExperienceForm 
        shouldSubmit={shouldSubmit}
        onSubmit={handleFormSubmit}
      />
      <button onClick={() => setShouldSubmit(true)}>
        提交工作经历表单
      </button>
    </div>
  );
};

export default ParentComponent;

修改后的子表单组件 #

import React, { useEffect } from 'react';
import { Field, reduxForm } from 'redux-form';

const WorkExperienceForm = ({ shouldSubmit, onSubmit, handleSubmit }) => {
  const renderField = ({ input, label, type }) => (
    <div>
      <label>{label}</label>
      <input {...input} type={type} />
    </div>
  );

  // 监听shouldSubmit状态变化，触发提交
  useEffect(() => {
    if (shouldSubmit) {
      handleSubmit(onSubmit)();
    }
  }, [shouldSubmit, handleSubmit, onSubmit]);

  return (
    <div>
      <Field name="company" component={renderField} label="公司名称" />
      <Field name="position" component={renderField} label="职位" />
    </div>
  );
};

export default reduxForm({
  form: 'workExperience'
})(WorkExperienceForm);

小提示 #

• 两种方法里，Ref方式更简单直接，适合大多数普通场景；状态驱动的方式更适合有复杂提交逻辑控制的场景
• 注意调用handleSubmit的时候要加一对额外的括号（handleSubmit(...)()），因为handleSubmit返回的是一个函数，需要手动触发执行

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