如何更改 onClick 事件中的样式？

Question

我想 show/hide 屏幕顶部的搜索栏。我正在尝试实现一个操作，在按下搜索按钮时显示搜索栏，并在按下搜索栏的关闭按钮时再次隐藏搜索栏。

  const showSearchBar = () => {
    document.querySelector("#hearder_search_bar").style = {
      top : 0
    }
  };

  const hideSearchBar = () => {
    document.querySelector("#hearder_search_bar").style = {
      top : -71
    }
  };

 return (
    <>    
      <form id = "hearder_search_bar" action="#" className="header__search">
        <input type="text" placeholder="Search"/>
        <button
          type="button"
          class="search"
          onClick={...}
        >
        </button>
        <button 
          type="button" 
          className="close"
          onClick={hideSearchBar}
        >
      </form>

      <div className="header__action--search">
            <button 
              className="header__action-btn" 
              type="button"
              onClick={showSearchBar}>
            </button>
      </div>
    </>
 );

css

.header__search {
  position: absolute;
  left: 0;
  top: -71px;
}

Answer 1

使用 React useState 挂钩并让 React 处理 DOM.

的操作

const [shouldShowSearch, setShouldShowSearch] = useState(false);
const toggleShowSearch = () => setShouldShowSearch(prev => !prev);
const label = shouldShowSearch ? 'hide' : 'show';
const top = shouldShowSearch ? '70px' : '0';
//... code
<>
<form id="hearder_search_bar" action="#" className="header__search" style={{top}}>
// ... code
<button 
          type="button" 
          className={label}
          onClick={toggleShowSearch}
        >
</form>
// .. code
<button onclick={toggleShowSearch}>{label} search</button>

Answer 2

您可以使用条件类名

className={headerIsHidden ? 'header__search__hidden' : 'header__search__shown'

如何更改 onClick 事件中的样式？

How can I change styles in the onClick event?

styles

onclick

reactjs