ReactJS中如何在模态框展示表单提交的所有值？

一、确保表单数据正确收集并传递给Modal #

首先要在ContactForm.js中完成两个核心动作：收集完整的表单有效值，提交验证通过后将数据传递给Modal并触发显示。

修改ContactForm.js示例：

import { useState } from 'react';
import FormInput from './FormInput';
import Modal from './Modal';

const ContactForm = () => {
  const [formData, setFormData] = useState({
    name: '',
    email: '',
    phone: '',
    message: ''
    // 根据你的实际表单字段补充
  });
  const [errors, setErrors] = useState({});
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [submittedData, setSubmittedData] = useState({});

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // 你的原有验证逻辑，确保返回布尔值判断是否通过
  const validate = () => {
    const newErrors = {};
    if (!formData.name.trim()) newErrors.name = '姓名不能为空';
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) newErrors.email = '邮箱格式错误';
    // 其他字段验证规则...
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (validate()) {
      // 存储验证后的完整表单数据
      setSubmittedData(formData);
      // 触发模态框显示
      setIsModalOpen(true);
      // 可选：提交后重置表单
      // setFormData({ name: '', email: '', phone: '', message: '' });
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <FormInput
          label="姓名"
          name="name"
          value={formData.name}
          onChange={handleChange}
          error={errors.name}
        />
        <FormInput
          label="邮箱"
          name="email"
          type="email"
          value={formData.email}
          onChange={handleChange}
          error={errors.email}
        />
        {/* 其他FormInput组件，确保每个输入项的name与formData的key对应 */}
        <button type="submit">提交</button>
      </form>
      {/* 将提交数据和显示状态传递给Modal */}
      <Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} data={submittedData} />
    </div>
  );
};

export default ContactForm;

二、修改Modal组件渲染提交数据 #

在Modal.js中接收data属性，通过遍历对象键值对的方式，完整展示所有表单字段。如果有特殊类型的输入（如复选框、单选），可针对性处理显示格式。

修改Modal.js示例：

const Modal = ({ isOpen, onClose, data }) => {
  if (!isOpen) return null;

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-content" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose}>×</button>
        <h2>提交的表单数据</h2>
        <div className="modal-data">
          {Object.entries(data).length === 0 ? (
            <p>暂无提交数据</p>
          ) : (
            Object.entries(data).map(([key, value]) => (
              <div key={key} className="data-item">
                {/* 将字段名首字母大写，优化显示 */}
                <span className="data-label">{key.charAt(0).toUpperCase() + key.slice(1)}:</span>
                {/* 处理空值显示 */}
                <span className="data-value">{value || '未填写'}</span>
              </div>
            ))
          )}
        </div>
      </div>
    </div>
  );
};

export default Modal;

三、补充基础样式（可选） #

为模态框添加基础CSS，提升用户体验：

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  position: relative;
  min-width: 320px;
}

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

.data-item {
  margin: 0.8rem 0;
  display: flex;
  gap: 0.6rem;
}

.data-label {
  font-weight: 600;
  min-width: 80px;
}

四、关键注意点 #

• 确保formData的key与所有表单输入项的name属性完全对应，避免数据遗漏
• 若表单包含复选框、单选按钮等非文本输入，需在handleChange中正确处理数据格式（比如复选框存储选中值数组）
• 仅在验证通过后打开模态框，避免展示无效或不完整的数据

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