基于WordPress后端数据的React搜索筛选组件实现求助

针对你的需求，下面是具体的实现方案，直接基于你的现有代码修改即可：

核心实现步骤 #

1. 补充状态管理与输入处理 #

首先需要在组件中添加状态存储搜索关键词，同时修改handleSearch来正确获取输入框的值：

import { useState, useMemo, useEffect } from 'react';

// ... 其他导入

const EventSearchFilter: React.FC<IEventSearchFilterProps> = ({
  eventData,
}) => {
  // 新增：存储搜索关键词的状态
  const [searchTerm, setSearchTerm] = useState<string>('');

  // 修改：处理输入框变化，更新搜索关键词
  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value.trim());
  };

  // ... 后续代码
};

2. 实现搜索筛选逻辑 #

使用useMemo缓存筛选结果，避免不必要的重复计算，同时适配WordPress返回的Record格式数据：

// 新增：基于搜索关键词筛选数据
const filteredEvents = useMemo(() => {
  // 无搜索词时返回全部数据
  if (!searchTerm) return Object.values(eventData);

  // 遍历数据，匹配标题、描述等字段（根据你WordPress实际返回的字段调整）
  return Object.values(eventData).filter(event => {
    // 拼接需要搜索的内容，转小写实现不区分大小写的模糊搜索
    const searchableContent = `${event.title || ''} ${event.excerpt || ''}`.toLowerCase();
    return searchableContent.includes(searchTerm.toLowerCase());
  });
}, [searchTerm, eventData]);

3. 将筛选结果传递给父组件 #

因为你的组件仅负责筛选逻辑，最终渲染需要由父组件完成，所以需要在Props中新增回调函数，把筛选结果传递出去：

// 修改Props接口，新增回调
interface IEventSearchFilterProps {
  eventData: Record<string, any>;
  onFilterChange: (filteredData: any[]) => void;
}

// 在组件内新增：当筛选结果变化时通知父组件
useEffect(() => {
  onFilterChange(filteredEvents);
}, [filteredEvents, onFilterChange]);

4. 完善受控输入框 #

给AppInput绑定value属性，确保输入框状态和组件状态同步：

// 修改AppInput部分
<AppInput
  onChange={handleSearch}
  placeholder={'Search for event'}
  icon={<AiOutlineSearch />}
  value={searchTerm} // 新增：绑定状态值，变成受控组件
/>

完整修改后的组件代码 #

import { useState, useMemo, useEffect } from 'react';
import { AiOutlineSearch } from 'react-icons/ai';
// 导入你的样式组件和UI组件
import { StyledEventSearch, Container, Form, Row, Col, InputGroup, AppInput } from './your-components-path';

interface IEventSearchFilterProps {
  eventData: Record<string, any>;
  onFilterChange: (filteredData: any[]) => void;
}

const EventSearchFilter: React.FC<IEventSearchFilterProps> = ({
  eventData,
  onFilterChange,
}) => {
  const [searchTerm, setSearchTerm] = useState<string>('');

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value.trim());
  };

  const filteredEvents = useMemo(() => {
    if (!searchTerm) return Object.values(eventData);

    return Object.values(eventData).filter(event => {
      // 这里替换成你WordPress返回的实际字段，比如post_title、post_content等
      const searchableContent = `${event.title || ''} ${event.excerpt || ''}`.toLowerCase();
      return searchableContent.includes(searchTerm.toLowerCase());
    });
  }, [searchTerm, eventData]);

  useEffect(() => {
    onFilterChange(filteredEvents);
  }, [filteredEvents, onFilterChange]);

  return (
    <StyledEventSearch>
      <Container>
        <Form>
          <Row>
            <Col xl={5} lg={5} md={6} sm={12}>
              <InputGroup>
                <AppInput
                  onChange={handleSearch}
                  placeholder={'Search for event'}
                  icon={<AiOutlineSearch />}
                  value={searchTerm}
                />
              </InputGroup>
            </Col>
          </Row>
        </Form>
      </Container>
    </StyledEventSearch>
  );
};

export default EventSearchFilter;

额外优化建议 #

• 防抖处理：如果数据量较大，可以给搜索输入添加防抖（比如300ms延迟），避免每输入一个字符就触发一次筛选，减少性能消耗
• 后端搜索：如果数据量极大，建议直接调用WordPress REST API的搜索接口（/wp/v2/search），把搜索逻辑放在后端，前端只需要请求结果即可
• 多字段匹配：可以根据需求扩展搜索字段，比如分类名称、日期范围等，和已有的分类筛选逻辑结合使用

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