react+typescript实现搜索功能

在 React 和 TypeScript 中实现搜索功能可以按照以下步骤进行：

1. 创建一个搜索组件(SearchComponent.tsx)。

import React, { useState } from 'react';

interface SearchComponentProps {
  onSearch: (searchTerm: string) => void;
}

const SearchComponent: React.FC<SearchComponentProps> = ({ onSearch }) => {
  const [searchTerm, setSearchTerm] = useState('');

  const handleSearch = () => {
    onSearch(searchTerm);
  };

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
      />
      <button onClick={handleSearch}>Search</button>
    </div>
  );
};

export default SearchComponent;

2. 在父组件中使用搜索组件并处理搜索逻辑。

import React from 'react';
import SearchComponent from './SearchComponent';

const ParentComponent: React.FC = () => {
  const handleSearch = (searchTerm: string) => {
    // 在这里处理搜索逻辑，可以发送请求或进行其他操作
    console.log('搜索关键词:', searchTerm);
  };

  return (
    <div>
      <h1>搜索功能示例</h1>
      <SearchComponent onSearch={handleSearch} />
    </div>
  );
};

export default ParentComponent;

3. 将父组件渲染到根节点。

import React from 'react';
import ReactDOM from 'react-dom';
import ParentComponent from './ParentComponent';

ReactDOM.render(
  <React.StrictMode>
    <ParentComponent />
  </React.StrictMode>,
  document.getElementById('root')
);

以上是一个简单的搜索功能的实现示例，你可以根据实际需求进行相应的修改和扩展。