如何通过自定义Hook结合按钮onClick实现Div的显示与隐藏？

问题分析 #

你的代码存在两个核心问题：

1. 自定义Hook仅返回了状态值showFilter，没有暴露修改状态的方法，导致外部组件无法主动更新状态
2. 按钮的onClick事件只是对showFilter取反，没有调用状态更新函数，因此不会触发组件重渲染，自然无法实现显示/隐藏切换

修正方案 #

1. 修改自定义Hook，暴露状态值与切换方法

修改useOpenFiltersHook，让它返回状态值和状态切换函数的组合，这样外部组件就能主动控制状态变化：

import { useEffect, useState } from 'react';

export const useOpenFiltersHook = (): [boolean, () => void] => {
  const [showFilter, setShowFilter] = useState(false);

  // 定义状态切换方法，基于前一次状态取反
  const toggleShowFilter = () => {
    setShowFilter(prevState => !prevState);
  };

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);

  // 返回状态值和切换方法
  return [showFilter, toggleShowFilter];
};

2. 调整组件中的使用逻辑

从Hook中解构出状态值和切换方法，绑定到按钮的onClick事件上，同时可以根据状态动态调整按钮文本：

const [showFilter, toggleShowFilter] = useOpenFiltersHook();

{/* 仅在showFilter为true时显示的区域，点击按钮隐藏 */}
{showFilter && (
  <div>
    <button onClick={toggleShowFilter}>
      <div>Hide Filter</div>
    </button>
  </div>
)}

{/* 可选：始终显示控制按钮，文本随状态切换 */}
<button onClick={toggleShowFilter}>
  <div>{showFilter ? 'Hide Filter' : 'Show Filter'}</div>
</button>

关键说明 #

• 使用setShowFilter(prevState => !prevState)的函数式更新，确保状态切换基于最新的状态值，避免闭包导致的状态不同步问题
• 按钮的onClick直接调用toggleShowFilter，触发状态更新后React会自动重渲染组件，实现div的显示/隐藏切换

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