react实现一个带搜索的input

可以使用 React 的 state 来存储输入框中的值，并且使用 onChange 事件来更新 state 中的值。然后根据搜索的关键字过滤出相关的结果。

以下是一个简单的示例代码：

import React, { useState } from 'react';

const SearchInput = () => {
  const [value, setValue] = useState('');
  const [results, setResults] = useState([]);

  const handleInputChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);

    // 这里可以根据具体的搜索逻辑进行修改
    const filteredResults = myData.filter((item) =>
      item.name.toLowerCase().includes(inputValue.toLowerCase())
    );
    setResults(filteredResults);
  };

  return (
    <div>
      <input type="text" value={value} onChange={handleInputChange} />
      <ul>
        {results.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

const myData = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
  { id: 4, name: 'Durian' },
  { id: 5, name: 'Elderberry' },
];

在这个示例中，我们使用了一个 state 变量 `value` 来存储输入框中的值。当输入框的值发生变化时，我们使用 `handleInputChange` 函数来更新 `value` 的值，并且根据具体的搜索逻辑来更新 `results` 的值。最后将搜索结果展示在一个无序列表中。