ReactJS中如何通过同一按钮实现搜索栏的打开与关闭

你代码里的状态切换逻辑写反且冗余，当前search函数的逻辑是：

• 当searchIsOpen为true时，执行setSearchIsOpen(true)，状态保持开启
• 当searchIsOpen为false时，执行setSearchIsOpen(false)，状态保持关闭
  等于点击按钮完全不会改变状态值，自然无法触发切换。另外你没有给搜索栏元素绑定状态做条件渲染，就算状态正常切换，搜索栏也不会按预期显示/隐藏。

import { useState } from 'react';

export default function SearchComponent() {
  const [searchIsOpen, setSearchIsOpen] = useState(false);

  // 直接取反当前状态实现同按钮切换开/关
  const toggleSearch = () => {
    setSearchIsOpen(prevState => !prevState);
  };

  return (
    <div className="relative">
      <button 
        onClick={toggleSearch}
        className="absolute md:left-8 left-3 lg:left-2 top-6 md:top-8 cursor-pointer"
      >
        {/* 建议补充按钮可见内容，比如搜索图标，避免空按钮用户无法识别 */}
        🔍
      </button>

      {/* 状态为true时才渲染搜索输入栏 */}
      {searchIsOpen && (
        <div>
          <input type="text" placeholder="请输入搜索关键词" />
        </div>
      )}
    </div>
  );
}

• 状态更新用prevState => !prevState的函数式写法，能规避React闭包陷阱导致的状态更新异常，比直接写setSearchIsOpen(!searchIsOpen)更稳妥
• 如果需要打开搜索栏时自动聚焦输入框，可以给input标签绑定useRef，在searchIsOpen变为true时触发输入框的focus()方法即可
• 按钮内部建议补充放大镜图标或者文字，空按钮在页面上没有可点击标识，用户无法感知交互入口

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