如何在reacatjs中打开和关闭搜索栏？

Question

我需要在reactjs中打开一个非常简单的搜索栏，没有关闭按钮，因为我想单击相同的按钮来关闭它。

下面是一些我尝试过但没有成功的代码。

  const [searchIsOpen, setSearchIsOpen] = useState(false);
  const search = () => {
    if (searchIsOpen) {
      setSearchIsOpen(true);
    } else {
      setSearchIsOpen(false);
    }
  };

<button onClick={search}
        className="absolute md:left-8 left-3 lg:left-2 top-6 md:top-8 cursor-pointer"> 
 </button>

这个元素应该会打开。

    <div>
  <input type="text" name="" id="" />
  </div>

谢谢。

Answer 1

您应该使用条件呈现。

const [searchIsOpen, setSearchIsOpen] = useState(false);
const search = () => {
  setSearchIsOpen(!searchIsOpen);
};





<button onClick={search} className="absolute md:left-8 left-3 lg:left-2 top-6 md:top-8 cursor-pointer"></button>
{
  searchIsOpen && <div>
    <input type="text" name="" id="" />
  </div>
}

Answer 2

<div>
  { searchIsOpen && <input type="text" name="" id="" /> }
</div>