React表单字段值错位及头像位置偏移问题求助

问题1：表单字段值错位 #

原因 #

当storeMajor、storeIntake或storePhoneNumber为空时，对应的<p>标签无内容导致高度坍塌，后续元素向上偏移；同时查看状态下的文本无高度约束，和编辑状态下带h-10类的输入框高度不一致，引发布局错位。

修复方案 #

1. 给第三列所有<p>标签添加h-10类，强制固定高度，避免内容为空时高度坍塌：

<div className="w-1/12 text-5xl font-semibold mr-48 space-y-6 mt-36">
  <p className="h-10">{name}</p>
  <p className="h-10">{id}</p>
  <p className="h-10">{email}</p>
  <p className="h-10">
    {/* 原有内容 */}
  </p>
  <p className="h-10">
    {/* 原有内容 */}
  </p>
  <p className="h-10">
    {/* 原有内容 */}
  </p>
</div>

2. 简化保存逻辑，直接赋值字段值（空值也能正确存储，无需额外判断）：

onClick={() => {
  setShow(false);
  setStoreMajor(major);
  setStoreIntake(intake);
  setStorePhoneNumber(phoneNumber);
}}

问题2：头像位置偏移 #

原因 #

切换编辑/保存状态时，按钮区域的元素高度变化（单个Edit按钮和双按钮容器高度不同），导致包含头像和按钮的flex列容器高度波动，带动头像位置偏移。

修复方案 #

1. 将第一列的items-center改为items-start，给头像添加mx-auto保证水平居中，让头像位置独立于按钮区域变化：

<div className="flex flex-col items-start justify-center w-2/5 mt-10 ml-20">
  <img src="avatar.png" alt="profile picture" loading="lazy" className="mx-auto"></img>

2. 给Edit按钮添加h-12类，给Save/Cancel按钮的容器添加h-20类，确保两种状态下按钮区域高度一致：

<button
  onClick={() => setShow(true)}
  className="bg-[#CC6666] opacity-80 px-10 rounded-xl border hover:border-slate-500 mt-8 text-3xl text-[#1B1C1E] font-dongle h-12"
>
  Edit
</button>

<div
  className="flex justify-center items-center ml-3 space-x-10 w-72 mt-8 h-20"
>
  {/* Save和Cancel按钮 */}
</div>

修复后的完整代码 #

import React, { useState } from "react";
import { NavbarStudent, Footer } from "../../../components";

const Profile = ({ name, id, email }) => {
  const [show, setShow] = useState(false);
  const [major, setMajor] = useState("");
  const [intake, setIntake] = useState("");
  const [phoneNumber, setPhoneNumber] = useState("");
  const [storeMajor, setStoreMajor] = useState("");
  const [storeIntake, setStoreIntake] = useState("");
  const [storePhoneNumber, setStorePhoneNumber] = useState("");

  const handleCancel = () => {
    setShow(false);
    setMajor(storeMajor);
    setIntake(storeIntake);
    setPhoneNumber(storePhoneNumber);
  };

  return (
    <div>
      <NavbarStudent></NavbarStudent>
      <div className="flex flex-row mr-72">
        {/* First column */}
        <div className="flex flex-col items-start justify-center w-2/5 mt-10 ml-20">
          <img src="avatar.png" alt="profile picture" loading="lazy" className="mx-auto"></img>

          {!show ? (
            <button
              onClick={() => setShow(true)}
              className="bg-[#CC6666] opacity-80 px-10 rounded-xl border hover:border-slate-500 mt-8 text-3xl text-[#1B1C1E] font-dongle h-12"
            >
              Edit
            </button>
          ) : (
            <div
              className="flex justify-center items-center ml-3 space-x-10 w-72 mt-8 h-20"
            >
              <button
                className="bg-[#CC6666] opacity-80 px-10 rounded-xl text-3xl text-[#1B1C1E] border hover:border-slate-500 font-dongle"
                onClick={() => {
                  setShow(false);
                  setStoreMajor(major);
                  setStoreIntake(intake);
                  setStorePhoneNumber(phoneNumber);
                }}
              >
                Save
              </button>
              <button
                className="border-[#B02B3B] border-4 box-border w-28 h-9 pb-8 rounded-xl hover:border-slate-500 text-3xl ml-4 bg-[#ffffff] drop-shadow-[0_4px_1px_rgba(0,0,0,0.25)] text-[#1B1C1E]"
                onClick={handleCancel}
              >
                Cancel
              </button>
            </div>
          )}
        </div>

        {/* Second column */}
        <div className="w-3/12 text-5xl text-[#1B1C1E] font-semibold ml-28 space-y-6 mt-36">
          <p className="h-10">Full name:</p>
          <p className="h-10">ID:</p>
          <p className="h-10">Email:</p>
          <p className="h-10">Major:</p>
          <p className="h-10">Intake:</p>
          <p className="h-10">Phone number:</p>
        </div>

        {/* Third column */}
        <div className="w-1/12 text-5xl font-semibold mr-48 space-y-6 mt-36">
          <p className="h-10">{name}</p>
          <p className="h-10">{id}</p>
          <p className="h-10">{email}</p>
          <p className="h-10">
            {show ? (
              <input
                type="text"
                id="major"
                name="major"
                className="bg-[#CC6666]/30 rounded-2xl h-10 w-96 text-[#1B1C1E] px-3"
                value={major}
                onChange={(e) => setMajor(e.target.value)}
              ></input>
            ) : (
              <span>{storeMajor}</span>
            )}
          </p>
          <p className="h-10">
            {show ? (
              <input
                type="text"
                id="intake"
                name="intake"
                className="bg-[#CC6666]/30 rounded-2xl h-10 w-96 text-[#1B1C1E] px-3"
                value={intake}
                onChange={(e) => setIntake(e.target.value)}
              ></input>
            ) : (
              storeIntake
            )}
          </p>

          <p className="h-10">
            {show ? (
              <input
                type="text"
                id="phoneNumber"
                name="phoneNumber"
                className="bg-[#CC6666]/30 rounded-2xl h-10 w-96 text-[#1B1C1E] px-3"
                value={phoneNumber}
                onChange={(e) => setPhoneNumber(e.target.value)}
              ></input>
            ) : (
              storePhoneNumber
            )}
          </p>
        </div>
      </div>
      <Footer></Footer>
    </div>
  );
};

export default Profile;

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