如何在提交reduxForm表单后弹窗显示Modal组件？

嘿，我来帮你搞定这个问题！核心就是要把表单提交的数据和Modal的显示状态打通，让它们能联动起来——提交表单后自动打开Modal，同时把用户输入的值传过去动态渲染。下面是针对你提到的三个文件的具体修改方案：

1. 先调整App组件，统一管理Modal状态 #

因为Modal原本是在App顶部的，所以我们需要在App里维护两个关键状态：Modal的显示/隐藏，以及表单提交的数据。这样就能在表单提交时触发弹窗，同时把数据传递过去。

// App.jsx
import React, { useState } from 'react';
import Form from './Form';
import Modal from './Modal';
import './App.css';

function App() {
  // 控制Modal是否显示
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 存储用户提交的表单数据
  const [submittedData, setSubmittedData] = useState({});

  // 表单提交后的回调：接收数据并打开Modal
  const handleFormSubmit = (formData) => {
    setSubmittedData(formData);
    setIsModalOpen(true);
  };

  // 关闭Modal的方法
  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <div className="App">
      {/* 把提交回调传给Form组件 */}
      <Form onFormSubmit={handleFormSubmit} />
      {/* 把状态、数据和关闭方法传给Modal */}
      <Modal 
        isOpen={isModalOpen} 
        onClose={closeModal} 
        formData={submittedData} 
      />
    </div>
  );
}

export default App;

2. 修改Form.jsx，让redux-form提交后触发回调 #

原来的redux-form表单提交后可能直接跳转到showResults，现在我们要改成调用App传过来的回调，把表单数据传递上去，而不是直接跳组件。

// Form.jsx
import React from 'react';
import { Field, reduxForm } from 'redux-form';

// 通用的表单字段渲染组件
const renderFormField = ({ input, label, type, meta: { touched, error } }) => (
  <div className="form-field">
    <label>{label}</label>
    <input {...input} type={type} placeholder={label} />
    {touched && error && <span className="error">{error}</span>}
  </div>
);

let UserForm = ({ handleSubmit, onFormSubmit }) => {
  // 处理表单提交：先通过redux-form的handleSubmit验证，再调用回调传数据
  const submitHandler = (data) => {
    handleSubmit(() => onFormSubmit(data))();
  };

  return (
    <form onSubmit={submitHandler} className="form">
      <Field name="username" component={renderFormField} type="text" label="用户名" />
      <Field name="email" component={renderFormField} type="email" label="邮箱" />
      {/* 这里可以加更多表单字段，比如密码、手机号等 */}
      <button type="submit" className="submit-btn">提交表单</button>
    </form>
  );
};

// 用reduxForm高阶组件包裹，设置表单唯一标识
UserForm = reduxForm({
  form: 'userSubmitForm' // 这个名称要唯一，redux-form用来区分不同表单
})(UserForm);

export default UserForm;

3. 改造showResults.jsx，专注渲染提交数据 #

原来的showResults返回Modal，现在我们可以让它只负责渲染用户提交的内容，变成Modal的子组件，这样职责更清晰。

// showResults.jsx
import React from 'react';

const ShowResults = ({ formData }) => (
  <div className="modal-content">
    <h3>表单提交成功！</h3>
    <p>你提交的内容如下：</p>
    <div className="data-list">
      {Object.entries(formData).map(([key, value]) => (
        <div key={key} className="data-item">
          <span className="data-label">{key}:</span>
          <span className="data-value">{value}</span>
        </div>
      ))}
    </div>
  </div>
);

export default ShowResults;

4. 更新Modal.jsx，支持动态显示和内容渲染 #

让Modal组件接收isOpen、onClose和formData三个props，根据isOpen决定是否渲染，同时把数据传给ShowResults组件动态展示。

// Modal.jsx
import React from 'react';
import ShowResults from './showResults';
import './Modal.css';

const Modal = ({ isOpen, onClose, formData }) => {
  // 如果isOpen为false，直接返回null，不渲染Modal
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      {/* 点击弹窗内部不触发关闭 */}
      <div className="modal-container" onClick={(e) => e.stopPropagation()}>
        {/* 关闭按钮 */}
        <button className="modal-close-btn" onClick={onClose}>×</button>
        {/* 动态渲染提交的内容 */}
        <ShowResults formData={formData} />
      </div>
    </div>
  );
};

export default Modal;

最后加个基础的Modal样式（可选） #

在Modal.css里添加以下样式，让弹窗看起来更美观：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background-color: white;
  padding: 2rem;
  border-radius: 8px;
  width: 90%;
  max-width: 500px;
  position: relative;
}

.modal-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: transparent;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

.modal-content h3 {
  margin-top: 0;
  color: #333;
}

.data-list {
  margin-top: 1rem;
}

.data-item {
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.data-label {
  font-weight: bold;
  margin-right: 0.5rem;
}

关键逻辑说明 #

• 把Modal的状态管理提到App组件，这样能避免redux-form和Modal的状态割裂，实现提交即弹窗的联动
• redux-form的表单提交后，通过回调把验证后的数据传给App，触发Modal打开
• ShowResults只负责渲染数据，Modal负责弹窗的UI和显示逻辑，职责分离更易维护

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