react搜索功能

要实现React中的搜索功能，首先需要一个搜索框组件。可以使用React中的内置表单元素`<input>`来创建搜索框组件。

然后，在搜索框中输入内容时，可以通过React中的状态管理来存储该内容。可以使用`useState`钩子函数来创建一个状态变量，以便在搜索框中输入时更新该变量。

接下来，需要将输入的内容与要搜索的数据进行匹配。可以将要搜索的数据作为一个数组传递给搜索框组件，并在每次输入内容时，使用JavaScript中的`filter()`方法来过滤匹配的数据。可以使用`useEffect`钩子函数来监听输入内容的变化，并在每次输入后重新过滤数据。

最后，将过滤后的数据渲染到页面上。可以使用React中的`map()`方法来遍历过滤后的数据，并将其渲染为列表或表格等形式。

以下是一个基本的React搜索功能的示例代码：

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

const SearchBox = ({ data }) => {
  const [inputValue, setInputValue] = useState('');
  const [filteredData, setFilteredData] = useState([]);

  useEffect(() => {
    const filtered = data.filter(item =>
      item.toLowerCase().includes(inputValue.toLowerCase())
    );
    setFilteredData(filtered);
  }, [data, inputValue]);

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <ul>
        {filteredData.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
};

export default SearchBox;

在该示例中，`SearchBox`组件接收一个`data`数组作为props，该数组包含要搜索的数据。组件内部使用`useState`创建了`inputValue`和`filteredData`两个状态变量。

在`useEffect`钩子函数中，过滤`data`数组中匹配`inputValue`的数据，并将结果存储在`filteredData`变量中。`useEffect`监听`data`和`inputValue`的变化，并在它们发生变化时执行过滤操作。

最后，在渲染时，将过滤后的数据渲染为一个简单的无序列表。当用户在搜索框中输入内容时，列表会根据输入内容自动更新。