写一个react 查找搜索的功能

好的，下面是一个简单的 React 查找搜索功能的示例代码：

import React, { useState } from 'react';

const Search = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const [searchResults, setSearchResults] = useState([]);

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

  const handleSubmit = (event) => {
    event.preventDefault();
    const results = [...data].filter((item) =>
      item.toLowerCase().includes(searchTerm.toLowerCase())
    );
    setSearchResults(results);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Search"
          value={searchTerm}
          onChange={handleChange}
        />
        <button type="submit">Search</button>
      </form>
      <div>
        {searchResults.map((result, index) => (
          <p key={index}>{result}</p>
        ))}
      </div>
    </div>
  );
};

export default Search;

该代码创建了一个包含搜索框和搜索结果的组件，其中：

- 使用 `useState` hook 声明了两个状态：`searchTerm` 和 `searchResults`
- `handleChange` 函数用于监听搜索框的内容变化，并将内容更新到 `searchTerm` 状态中
- `handleSubmit` 函数在搜索按钮被提交时执行，过滤出包含 `searchTerm` 的数据，并将结果保存到 `searchResults` 状态中
- `form` 元素中的输入框和按钮通过调用 `handleChange` 和 `handleSubmit` 函数实现与状态的交互

该示例代码仅提供了一个简单的 React 查找搜索功能的实现方式，具体的实现方式可能因项目需求和数据源