React中通过OnClick事件实现帖子分类过滤功能失效问题排查

我帮你梳理了代码里的问题，主要有几个核心原因导致点击按钮后没过滤效果，下面一一拆解并给出修复方案：

问题根源分析 #

• 事件绑定错误：你在SidebarOptions的div上用了onChange事件，但div元素本身不支持这个事件（onChange一般用于输入类元素），应该换成onClick；而且你只是把searchHandler作为函数引用传进去，没有实际调用它，正确的写法应该是searchHandler(参数)。
• 过滤逻辑不匹配需求：原来的searchHandler是根据帖子的question内容包含输入值来过滤，但你的需求是按类别过滤，所以逻辑完全不对，应该匹配帖子的类别字段而不是question内容。
• 参数传递逻辑错误：原来的函数依赖event.target.value，但点击按钮时没有event对象，直接传递类别字符串才是正确的方式。

修复步骤 #

1. 修正SidebarOptions的事件绑定 #

把div的onChange改成onClick，并且调用searchHandler时直接传入类别名称，比如"Software Projects"：

function SidebarOptions({ searchHandler }) { 
  return ( 
    <div className="sidebarOptions"> 
      <div 
        className="sidebarOption" 
        onClick={() => searchHandler("Software Projects")}
      > 
        <img 
          src="https://c.pxhere.com/photos/7b/1a/code_coding_computer_developer_developing_development_macbook_notebook-913320.jpg!d" 
          alt="Software Projects" 
        /> 
        <p>Software Projects</p> 
      </div>
      {/* 可选：添加显示所有帖子的按钮 */}
      <div 
        className="sidebarOption" 
        onClick={() => searchHandler(null)}
      > 
        <p>All Posts</p> 
      </div> 
    </div> 
  ); 
};

2. 重写Home组件的searchHandler逻辑 #

调整函数，让它能接收类别参数，并且按类别字段过滤帖子（这里假设你的Firestore文档里有category字段，如果实际字段名不同，记得替换）：

const searchHandler = (category) => { 
  // 如果传入类别，过滤对应帖子；否则重置为显示所有帖子
  setFilteredPosts( 
    category 
      ? posts.filter(post => post.question.category === category) 
      : null 
  ); 
};

如果你还需要保留Header里的关键词搜索功能（原来的输入框搜索），可以让函数兼容两种场景：

const searchHandler = (input) => { 
  let filterValue;
  // 判断传入的是输入框事件还是类别字符串
  if (input?.target) {
    filterValue = input.target.value;
    // 关键词搜索逻辑：匹配question内容
    setFilteredPosts( 
      filterValue 
        ? posts.filter(post => post.question.question.includes(filterValue)) 
        : null 
    );
  } else {
    // 类别过滤逻辑：匹配category字段
    setFilteredPosts( 
      input 
        ? posts.filter(post => post.question.category === input) 
        : null 
    );
  }
};

3. 确保Firestore数据包含类别字段 #

检查你的questions集合里的每个文档，确认存在category字段，并且值为"Software Projects"这样的字符串，否则过滤逻辑会找不到匹配的帖子。

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