React实现用户昵称原地编辑：替代弹出输入框方案

以下是修改后的代码，实现点击编辑后在原昵称位置直接编辑，点击更新完成原地更新：

export default function UserProfile(props) {
  const { isLoggedIn, user, profile } = useSelector((state) => state.AuthReducer);
  const { wallet, paired_curency_price, coins, wallet_loading } = useSelector(
    (state) => state.coinDBReducer
  );
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(true);
  const [hide, setHide] = useState(false);
  // 将原nodisplay改为更语义化的isEditing，标识是否处于编辑状态
  const [isEditing, setIsEditing] = useState(false);
  const [name, setName] = useState("");
  const [total_btc, setTotalBtc] = useState(0);
  const [total_usdt, setTotalUsdt] = useState(0);

  const updateProfile = (e) => {
    e.preventDefault();
    if (checkName(name)) {
      N_updateName(
        user?.params ? user.params.token : user.token,
        name
      ).then((res) => {
        if (res.status.matchedCount == 1) {
          setName("");
          // 退出编辑状态
          setIsEditing(false);
          N_getProfile(user?.params ? user.params.token : user.token)
            .then((d) => {
              if (d.status === 200) {
                dispatch({ type: 'PROFILE', data: d?.params.profile_info });
              }
            })
            .catch((e) => {
              console.log(e);
            });
          NotificationManager.success("Updated Successfully");
        } else {
          NotificationManager.error(res.message);
        }
      });
    } else {
      NotificationManager.error("Enter valid nick Name");
    }
  };

  return (
    <div className="profile-container">
      <div className="name_circle">
        {profile?.name
          ? profile?.name
              ?.split("")
              .slice(0, 2)
              .join("")
              .toUpperCase()
          : profile?.email
              ?.split("")
              .slice(0, 2)
              .join("")
              .toUpperCase()}
      </div>

      {/* 统一昵称展示/编辑区域，确保位置一致 */}
      <div className="d-flex align-items-center gap-2">
        <span>Hello, </span>
        {isEditing ? (
          <input
            // 复用原文本的样式类，保证视觉上原地替换
            className="big_heading text-capitalize me-2 text-truncate mob_mw_150 editable-input-box"
            type="text"
            value={name}
            onChange={(e) => {
              setName(e.target.value.replace(/[^\w\s]/gi, ""));
              // 修正原正则表达式的写法，原写法有误
            }}
            autoFocus // 进入编辑时自动聚焦
          />
        ) : (
          <div className="big_heading text-capitalize me-2 text-truncate mob_mw_150">
            {hide ? "**********" : profile?.name ? profile.name : profile?.email}
          </div>
        )}

        {/* 编辑/更新按钮切换 */}
        {isEditing ? (
          <button
            className="btn btn-pink btn-sm fs-14"
            onClick={(e) => updateProfile(e)}
          >
            Update
          </button>
        ) : (
          <span
            className="cursor_pointer"
            onClick={() => {
              setIsEditing(true);
              // 编辑时填充当前昵称到输入框
              setName(profile?.name || profile?.email || "");
            }}
          >
            <i className="fa fa-edit"></i>
          </span>
        )}
      </div>
    </div>
  );
}

关键修改说明 #

• 状态语义化：将原nodisplay改为isEditing，更清晰表达当前是否处于编辑状态
• 原地渲染结构：把昵称文本和输入框放在同一个容器内，使用相同的样式类，确保编辑时视觉上是原地替换，而非弹出新区域
• 按钮逻辑调整：非编辑状态显示编辑图标，编辑状态显示更新按钮，按钮和昵称区域放在同一行，保持布局连贯
• 输入框优化：添加autoFocus属性，进入编辑时自动聚焦；修正原正则表达式的错误写法，确保输入过滤逻辑正确
• 初始化值优化：点击编辑时，自动将当前昵称（或邮箱）填充到输入框，提升用户体验

内容的提问来源于stack exchange，提问作者Shivanshu Singh