React输入框为空时如何隐藏.com后缀？

你的代码核心问题在于handleChange函数里的逻辑判断完全错误，导致输入框为空时后缀依然会显示。下面直接给出修复方案和原因说明：

方案一：简化逻辑，移除多余状态（推荐） #

不需要单独维护inputExtension状态，直接根据输入内容动态生成后缀，代码更简洁：

import React, { useState } from "react";
import Check from "./Check";

export default function App() {
  const [inputValue, setInputValue] = useState("");

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  // 动态生成后缀：输入不为空时显示.com，为空则不显示
  const inputExtension = inputValue ? ".com" : "";

  return (
    <>
      <h1 className="text-[2.1rem] font-semibold text-black">
        Find Your Perfect Domain
      </h1>
      <form>
        <label
          htmlFor="default-search"
          className="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-gray-300"
        >
          Search
        </label>
        <div className="relative">
          <input
            type="search"
            id="in"
            value={inputValue}
            onChange={handleChange}
            className="block p-4 pl-10 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500"
            placeholder="Search for domains..."
          />
        </div>
      </form>

      <Check domain={inputValue} extension={inputExtension} />
      <Check domain={inputValue} extension={inputExtension} />
    </>
  );
}

注：顺便修正了React规范问题——把原生HTML的for改为htmlFor、class改为className，避免和JS关键字冲突。

方案二：保留原状态结构，修复判断逻辑 #

如果一定要保留inputExtension状态，修改handleChange里的判断逻辑即可：

const handleChange = (e) => {
  const currentValue = e.target.value;
  setInputValue(currentValue);
  // 输入为空时清空后缀，否则设置为.com
  setInputExtension(currentValue ? ".com" : "");
};

原代码错误说明 #

你原来的两个if判断完全无效：

• setInputValue == inputValue：setInputValue是React的状态更新函数，和字符串类型的inputValue永远不可能相等，这个分支永远不会执行。
• inputValue == inputValue：这是恒成立的判断，不管输入内容是什么（包括空值），都会执行setInputExtension(".com")，所以空输入时后缀依然会显示。

内容的提问来源于stack exchange，提问作者Rabyaan Khan