react函数组件实现搜索功能

可以使用useState Hook来实现搜索功能。以下是一个简单的例子：

import React, { useState } from 'react';

function Search() {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearchInputChange = e => {
    setSearchTerm(e.target.value);
  };

  const handleSearchSubmit = e => {
    e.preventDefault();
    // 在此处添加搜索逻辑，例如向API发送请求等
    console.log(searchTerm);
  };

  return (
    <form onSubmit={handleSearchSubmit}>
      <input
        type="text"
        placeholder="搜索..."
        value={searchTerm}
        onChange={handleSearchInputChange}
      />
      <button type="submit">搜索</button>
    </form>
  );
}

export default Search;

在这个例子中，我们创建了一个名为`Search`的函数组件，使用了useState Hook来定义一个名为`searchTerm`的状态。我们在`<input>`元素中使用了`value`和`onChange`属性来将输入框的值与这个状态绑定起来。当用户在输入框中输入时，`handleSearchInputChange`函数将被调用，该函数调用`setSearchTerm`函数来更新`searchTerm`状态。当用户点击搜索按钮时，`handleSearchSubmit`函数将被调用，该函数可以进行搜索逻辑的处理。