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

在React中，你可以创建一个表单来实现搜索功能。以下是一个简单的例子：

import React, { useState } from 'react';
 
const SearchForm = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] => useState('');
 
  const handleSubmit = (e) => {
    e.preventDefault();
    onSearch(searchTerm);
  };
 
  const handleChange = (e) => {
    setSearchTerm(e.target.value);
  };
 
  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={searchTerm}
        onChange={handleChange}
        placeholder="Search..."
      />
      <button type="submit">Search</button>
    </form>
  );
};
 
export default SearchForm;

在这个组件中，我们使用了Hook useState来管理表单输入的状态。handleSubmit函数会在表单被提交时调用，它会阻止表单的默认提交行为并调用onSearch函数，传递搜索词。handleChange函数会在输入字段的值改变时调用，更新搜索词状态。

你可以在父组件中使用这个SearchForm组件，并提供一个onSearch函数来处理搜索逻辑：

import React from 'react';
import SearchForm from './SearchForm';
 
const ParentComponent = () => {
  const onSearch = (searchTerm) => {
    // 实现你的搜索逻辑
    console.log('Searching for:', searchTerm);
  };
 
  return (
    <div>
      <SearchForm onSearch={onSearch} />
    </div>
  );
};
 
export default ParentComponent;

在这个父组件中，你需要实现onSearch函数来执行实际的搜索操作。这个例子只是简单地在控制台输出搜索词，你可以根据需要进行更复杂的处理。