在react中用表单实现一个搜索功能

在 React 中实现表单搜索功能，需要遵循以下步骤：

1. 创建一个表单组件，包含一个输入框和一个提交按钮。

2. 使用 React 的 state 管理输入框的值。

3. 编写一个事件处理函数，用来更新 state 中输入框的值。

4. 编写另一个事件处理函数，在提交按钮被点击时被调用，这个函数用来处理搜索功能。

5. 在事件处理函数中，使用输入框的值进行搜索，并显示结果。

以下是一个简单的实现示例：

import React, { useState } from "react";

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

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

  const handleSubmit = event => {
    event.preventDefault();
    // 在这里执行搜索
    console.log(`Search term: ${searchTerm}`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="Search..."
        value={searchTerm}
        onChange={handleChange}
      />
      <button type="submit">Search</button>
    </form>
  );
}

export default SearchForm;

在这个示例中，我们使用了 `useState` Hook 来管理输入框的值，并编写了两个事件处理函数 `handleChange` 和 `handleSubmit` 分别处理输入框值的更新和搜索功能。