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

Question

我需要在ReactJ中打开一个非常简单的搜索栏，并且没有关闭按钮，因为我想单击同一按钮将其关闭。

这是我尝试过的一些代码，但没有起作用。

  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>