react中搜索框筛选函数

在 React 中实现搜索框筛选功能的一般步骤如下：

1. 创建一个状态变量，用于存储输入框中的搜索关键字。例如：

const [searchTerm, setSearchTerm] = useState("");

2. 创建一个处理函数，用于更新搜索关键字的状态变量。例如：

const handleSearch = event => {
  setSearchTerm(event.target.value);
};

3. 在需要筛选的数据列表中，使用 `filter` 函数进行筛选。例如：

const filteredData = data.filter(item =>
  item.name.toLowerCase().includes(searchTerm.toLowerCase())
);

上面的代码中，`data` 是需要筛选的数据列表，`item.name` 是数据项的名称，`toLowerCase()` 函数将名称转换为小写字母，`includes()` 函数判断搜索关键字是否包含在名称中。

4. 将筛选后的数据渲染到页面上。例如：

{filteredData.map(item => (
  <div key={item.id}>{item.name}</div>
))}

上面的代码中，`filteredData` 是筛选后的数据列表，使用 `map` 函数将每个数据项渲染成一个 `div` 元素，并设置 `key` 属性以提高性能。

完整的代码示例如下：

import React, { useState } from "react";

const data = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" },
  { id: 3, name: "Charlie" },
  { id: 4, name: "David" }
];

const SearchBox = () => {
  const [searchTerm, setSearchTerm] = useState("");

  const handleSearch = event => {
    setSearchTerm(event.target.value);
  };

  const filteredData = data.filter(item =>
    item.name.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <div>
      <input type="text" value={searchTerm} onChange={handleSearch} />
      {filteredData.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default SearchBox;