如何在React JS的侧边栏(sidenav bar)中使用搜索筛选(search filter)

问题修复方案 #

你现有代码存在以下核心错误：

• 语法混用：定义的Menu是函数组件，不能使用类组件的this.state、this.setState语法，会直接触发运行报错
• 属性/方法拼写错误：获取输入框值的属性为e.target.value，不是e.target.val；字符串匹配方法为驼峰格式indexOf，不是全小写indexof
• 逻辑错误：resources是菜单条目数组，直接读取resources.name无法拿到单个条目的名称，需要先遍历数组再逐个匹配搜索关键词
• 重复定义：onchange方法在组件内外重复定义，执行逻辑冲突
• 状态调用错误：搜索状态定义在函数组件外部，组件内部无法通过this直接读取

修复后可运行代码 #

import { useState } from 'react';

const Menu = ({ resources, onMenuTap, translate, classes }) => {
  // 用useState管理搜索状态
  const [search, setSearch] = useState("");

  // 搜索输入变更回调
  const handleSearchChange = e => {
    setSearch(e.target.value.trim().toLowerCase());
  };

  // 过滤匹配搜索关键词的菜单条目
  const filteredMenuList = resources.filter(menuItem => {
    // 搜索为空时返回全部条目
    if (!search) return true;
    // 条目名称包含搜索关键词时返回
    return menuItem.name.toLowerCase().includes(search);
  });

  return (
    <Card className={classes.sidebarCard}>
      {/* 搜索输入框 */}
      <input 
        placeholder="Search" 
        value={search}
        onChange={handleSearchChange} 
      />
      {/* 渲染过滤后的菜单条目，替换为你原有的菜单项渲染逻辑即可 */}
      {filteredMenuList.map(menuItem => (
        <div key={menuItem.id} onClick={() => onMenuTap(menuItem)}>
          {translate(menuItem.name)}
        </div>
      ))}
    </Card>
  );
};

核心改动说明 #

• 改用React官方支持的useState Hook管理函数组件内部的搜索状态，移除所有错误的this相关语法
• 修正了输入框取值、字符串匹配的拼写错误，改用语义更清晰的includes方法做模糊匹配
• 新增菜单列表过滤逻辑，先对整个resources数组做搜索匹配筛选，再渲染符合条件的条目
• 给输入框绑定value属性实现受控组件，避免输入内容和状态不同步的异常

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