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

【问题标题】：How can I change styles in the onClick event?如何更改 onClick 事件中的样式？
【发布时间】：2021-08-20 09:38:58
【问题描述】：

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

  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;
}

【问题讨论】：

你必须使用状态来实现它。不要使用 DOM API。

标签： reactjs onclick styles

【解决方案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>

【讨论】：

感谢您的回答，但是插入const toggleShowSearch = setShouldShowSearch(prev => !prev);后，出现如下错误。 [未处理的运行时错误错误：重新渲染过多。 React 限制了渲染的数量以防止无限循环。]
对不起，它应该是：const toggleShowSearch = () => setShouldShowSearch(prev => !prev);。更新了上面的代码。
谢谢，没错。但是有没有办法根据屏幕的宽度改变初始状态？在pc(min-width : 1280)中，search_bar从头开始显示，在mobile中，search_bar在点击按钮时显示。
如果没有实时页面，真的很难看到发生了什么，你有过渡吗？如果不只是将top 样式属性更改为display，并在none/block 之间切换值。

【解决方案2】：

你可以使用条件类名

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

【讨论】：

感谢您的回答，但我已经尝试过这种方式。