React JS表单提交后移除输入字段仅显示Thank You实现方案问询

你只需要新增一个状态控制表单区块的显隐，点击提交后切换状态做条件渲染即可，修改后的完整代码如下：

import { useState } from 'react';
import { Link } from 'react-router-dom';

// 这里假设receipeList是你已经定义好的菜谱数据，若未定义请自行补充
const receipeList = [];

const Home = () => {
  // 存储三个输入框的内容
  const [saveInput, setInput] = useState({
    fname: '',
    lname: '',
    email: '',
  });
  // 控制是否已经提交成功
  const [isSubmitted, setIsSubmitted] = useState(false);

  const inputFields = (event) => {
    const { value, name } = event.target;
    setInput((preValue) => ({
      ...preValue,
      [name]: value,
    }));
  };

  const onSubmits = (event) => {
    event.preventDefault();
    // 提交后切换为已提交状态
    setIsSubmitted(true);
  };

  return (
    <div className="homeMain">
      <div className="row">
        <img
          className="home_img"
          src="https://i.pinimg.com/originals/53/b5/d7/53b5d70023efa05ec6797b25df413b73.jpg"
          alt="餐厅首页图"
        />
        <h1 className="home_h1 text-center">Maryam's Restaurant</h1>
        <Link
          style={{
            color: 'white',
            textDecoration: 'inherit',
            textAlign: 'center',
          }}
          to="/Restaurant"
          className="home_button"
        >
          查看菜单
        </Link>
        <h2 className="home_h2 text-center">
          Binging with Babish是一档美食节目，致力于探索虚构作品中的美食（偶尔也有黑暗料理）尝起来到底是什么味道。
        </h2>
        {receipeList.map((curElem, index) => (
          <div className="home2Main" key={index}>
            <img className="home_img2" src={curElem.img} alt={curElem.h1} />
            <p className="home2Mainp1">{curElem.h1}</p>
            <p className="home2Mainp2">{curElem.date}</p>
          </div>
        ))}
      </div>
      <HomeMainDetails />
      <div className="home4Main">
        {/* 已提交则仅显示感谢提示，否则显示完整注册表单 */}
        {isSubmitted ? (
          <h4 className="home4Mainh4">Thank You</h4>
        ) : (
          <>
            <h4>
              <strong>订阅</strong>
              <br />
              <small>
                注册你的邮箱地址，接收最新消息和更新。
              </small>
            </h4>
            <input
              className="home4MainInput"
              name="fname"
              onChange={inputFields}
              value={saveInput.fname}
              type="text"
              placeholder="名"
            />
            <input
              className="home4MainInput"
              name="lname"
              onChange={inputFields}
              value={saveInput.lname}
              type="text"
              placeholder="姓"
            />
            <input
              className="home4MainInput"
              name="email"
              onChange={inputFields}
              value={saveInput.email}
              type="email"
              placeholder="邮箱地址"
            />
            <button onClick={onSubmits}>注册</button>
            <h4 className="home4Mainh4">
              <small>请输入邮箱</small>
            </h4>
          </>
        )}
      </div>
    </div>
  );
};

export default Home;

注意：原代码中的homeMainDetails是自定义组件，React要求组件名必须大写开头，因此已修正为HomeMainDetails，请对应调整你的组件导入和定义。

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