React表单项目：如何在Modal中展示输入的表单数据？

核心问题分析 #

你当前的代码在提交表单时直接清空了输入框状态，导致Modal组件无法获取到用户输入的数据。需要先将提交的表单数据暂存到专门的状态中，再传递给Modal组件展示。

步骤1：修改Contact组件，存储并传递表单数据 #

新增状态存储提交后的表单信息，修改提交逻辑，并将数据传递给Modal组件：

import React, { useState } from "react";
import ModalComponent from "./ModalComponent/index.js";

const Contact = () => {
  const [showModal, setShowModal] = useState(false);
  const [inputValue, setInputValue] = useState("");
  const [emailValue, setEmailValue] = useState("");
  const [phoneNumberValue, setPhoneValue] = useState("");
  const [countryValue, setCountryValue] = useState("");
  // 新增状态用于存储要展示的表单数据
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    phone: "",
    country: ""
  });

  const buttonOnClick = () => {
    if (inputValue === "" || emailValue === "" || phoneNumberValue === "") {
      setShowModal(false);
    } else {
      // 将输入值存入formData
      setFormData({
        name: inputValue,
        email: emailValue,
        phone: phoneNumberValue,
        country: countryValue
      });
      setShowModal(true);
      // 清空输入框
      setInputValue("");
      setEmailValue("");
      setPhoneValue("");
      setCountryValue("");
    }
  };

  return (
    <>
      <div className="main">
        {/* 原表单代码保持不变 */}
        <form >
          <div className="baslik">
            <div className="container center">
              <h1>Contact Form</h1>
            </div>
          </div>
          <div className="field" >
            <label className="text"> Name And Surname: </label>
            <input type="text" className="form" placeholder="Kerem Kurt" value={inputValue} onChange={(e) => setInputValue(e.target.value)} required />
          </div>

          <div className="field">
            <label className="text"> E-mail: </label>
            <input type="email" className="form" placeholder="udenditfy@gmail.com" value={emailValue} onChange={(e) => setEmailValue(e.target.value)} required />
          </div>

          <div className="field">
            <label className="text"> Phone Number: </label>
            <input type="tel" className="form" pattern="[0-9]*" placeholder="+905373199437" value={phoneNumberValue} onChange={(e) => setPhoneValue(e.target.value)} required />
          </div>

          <div className="field">
            <label className="text" required > Country: </label>
            <select className="form" placeholder="Turkiye" value={countryValue} onChange={(e) => setCountryValue(e.target.value)}>
              <option value="Turkiye">Turkiye</option>
              <option value="Azerbaijan">Azerbaijan</option>
              <option value="Japan">Japan</option>
              <option value="Serbia">Serbia</option>
              <option value="France">France</option>
            </select>
          </div>
          <button type="button" className="button" onClick={() => buttonOnClick()}> Enter </button>
        </form>
        {!showModal && (inputValue === "" || emailValue === "" || phoneNumberValue === "") &&
          <div>Hata Var</div>}
      </div>
      {/* 传递formData给ModalComponent */}
      <ModalComponent 
        show={showModal} 
        handleClose={() => setShowModal(!showModal)} 
        formData={formData} 
      />
    </>
  );
};
export default Contact;

步骤2：修改ModalComponent，接收并渲染表单数据 #

在Modal组件中接收formData属性，并在弹窗主体中展示数据：

import React from 'react';
import { Modal, Button } from 'react-bootstrap';

export default function ModalComponent({ show, handleClose, formData }) {
  return (
    <>
      <Modal
        show={show}
        onHide={handleClose}
        backdrop="static"
        keyboard={false}
      >
        <Modal.Header closeButton>
          <Modal.Title>Contact Information</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          {/* 渲染表单数据 */}
          <div className="mb-3">
            <strong>姓名：</strong> {formData.name}
          </div>
          <div className="mb-3">
            <strong>邮箱：</strong> {formData.email}
          </div>
          <div className="mb-3">
            <strong>电话：</strong> {formData.phone}
          </div>
          <div className="mb-3">
            <strong>国家：</strong> {formData.country}
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>Understood</Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

额外优化建议 #

1. 可以通过useEffect监听showModal状态变化，避免原代码中console.log打印旧值的问题：

import { useEffect } from 'react';

// 在Contact组件中添加
useEffect(() => {
  console.log(`Form submitted, ${showModal}`);
}, [showModal]);

2. 表单验证可以结合HTML5的required属性和自定义逻辑，提升用户体验。

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