React模态框居中显示与表单数据访问问题及最佳实践咨询

核心问题在于你当前的Modal是独立无状态组件，无法直接获取父组件中表单的私有数据。下面是几种落地性强的最佳实践：

方案一：父组件托管状态（轻量场景首选） #

将表单数据和弹窗的显示状态统一放在包含表单和Modal的父组件中，通过props将数据和回调传递给Modal：

修改后的Modal组件 #

import React from 'react'
import "./Modal.css";
import boxes from  "../../assets/boxes.svg";
import logo from "../../assets/logo.svg";

// 通过props接收表单数据、关闭和提交回调
export const Modal = ({ formData, onClose, onSubmit }) => {
  return (
    <div className="main-container">
        <div className="container">
            <div className="background">
                <h4 className="margin-bottom">Saving to Master</h4>
                <h3 className="margin-top">Confirming Your Booking</h3>
                <img src={logo} alt="logo image"/>
                <h2 className="reduce-text">Save and Submit Timeslot</h2>
                <h2>for <span className="bold underline">{formData.name}</span></h2>
                <div><h1> REF{formData.referenceNumber}</h1></div>
                <img src={boxes} alt="Two Double Boxes"/>
                <br/>
                <button className="btn-close" onClick={onClose}>Close</button>
                <button className="btn-submit" onClick={onSubmit}>Submit</button>
            </div>
        </div>
    </div>
  )
}

父组件（包含表单和Modal） #

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

const BookingForm = () => {
  // 父组件管理表单数据和弹窗状态
  const [formData, setFormData] = useState({
    name: '',
    referenceNumber: '',
    // 补充其他表单字段
  });
  const [isModalOpen, setIsModalOpen] = useState(false);

  // 处理表单输入变更
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 表单提交时打开弹窗
  const handleFormSubmit = (e) => {
    e.preventDefault();
    setIsModalOpen(true);
  };

  // 弹窗提交：调用API并关闭弹窗
  const handleModalSubmit = () => {
    // 这里替换为实际的API调用逻辑
    console.log('提交数据到API:', formData);
    setIsModalOpen(false);
  };

  return (
    <div style={{ display: 'flex', justifyContent: 'flex-end', width: '100%' }}>
      {/* 右侧1/4宽度的表单 */}
      <form onSubmit={handleFormSubmit} style={{ width: '25%' }}>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleInputChange}
          placeholder="姓名"
        />
        <input
          type="text"
          name="referenceNumber"
          value={formData.referenceNumber}
          onChange={handleInputChange}
          placeholder="参考编号"
        />
        {/* 其他表单字段 */}
        <button type="submit">提交表单</button>
      </form>

      {/* 条件渲染弹窗 */}
      {isModalOpen && (
        <Modal
          formData={formData}
          onClose={() => setIsModalOpen(false)}
          onSubmit={handleModalSubmit}
        />
      )}
    </div>
  );
};

export default BookingForm;

方案二：Context API（多层嵌套场景） #

如果表单和Modal不在直接父子层级，或者需要在多个组件间共享表单数据，用React Context统一托管状态：

1. 创建表单数据Context，在顶层组件提供状态和操作方法
2. 表单组件通过useContext更新数据
3. Modal组件通过useContext获取数据和提交/关闭方法

方案三：状态管理库（大型应用） #

对于复杂的大型应用，表单数据需要跨页面/组件共享时，使用Redux、Zustand等状态管理库，Modal直接从store中读取表单数据并触发提交动作。

关键注意事项 #

• 替换Modal中的class为className（React中必须使用className定义CSS类）
• 弹窗用条件渲染控制显示/隐藏，避免CSS控制导致的状态不一致
• 提交API时添加加载状态，防止重复提交

内容的提问来源于stack exchange，提问作者Chris Gauthier Winnipeg