React中使用Hook实现输入框动态隐藏功能求助

你原代码的核心问题是直接在组件函数体中调用setState，这会触发无限重渲染（setState会让组件重新渲染，渲染后又会执行这段if逻辑再次调用setState，形成循环）。我们需要把状态更新逻辑放到合适的时机，同时拆分状态分别控制email和mobile的显示。

修改后的完整代码 #

import { useState } from "react";

export default function App() {
  // 语义化命名，把name改成username更清晰
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  // 分别控制email和mobile的显示状态，初始默认显示
  const [showEmail, setShowEmail] = useState(true);
  const [showMobile, setShowMobile] = useState(true);

  // 处理username的输入变化
  const handleUsernameChange = (e) => {
    const value = e.target.value;
    setUsername(value);
    
    // 有@则隐藏email
    setShowEmail(!value.includes("@"));
    // 有数字则隐藏mobile
    setShowMobile(!/\d/.test(value));
  };

  return (
    <>
      <input
        type="text"
        placeholder="username"
        value={username}
        onChange={handleUsernameChange}
      />
      <input
        type="password"
        placeholder="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      {/* 条件渲染email输入框 */}
      {showEmail && (
        <input type="email" placeholder="email" id="email" />
      )}
      {/* 条件渲染mobile输入框 */}
      {showMobile && (
        <input type="number" placeholder="mobile" />
      )}
    </>
  );
}

关键改动说明 #

1. 语义化状态命名：把name改为username，避免和通用名称混淆，提升代码可读性。
2. 拆分控制状态：用showEmail和showMobile两个独立状态分别控制对应输入框的显示，比单一show状态更清晰。
3. 逻辑移至事件处理函数：在handleUsernameChange中统一处理用户名更新和显示状态判断，避免组件渲染时的无限循环。
4. 正则判断数字：用/\d/.test(value)检测输入内容是否包含数字，满足“输入任意数字时mobile隐藏”的需求。
5. 条件渲染：通过{showEmail && ...}和{showMobile && ...}实现输入框的显示/隐藏切换。

内容的提问来源于stack exchange，提问作者Neha Verma