帮我用react+ts实现关键字模糊查询接口的联通

好的，我可以为您提供一个简单的示例代码，演示如何使用React和TypeScript实现关键字模糊查询接口的联通。

首先，我们需要安装必要的依赖项。打开终端，进入项目目录，执行以下命令：

npm install react react-dom @types/react @types/react-dom axios @types/axios

其中，`react`和`react-dom`是React框架的核心依赖，`@types/react`和`@types/react-dom`是React框架的TypeScript类型定义文件，`axios`是一个基于Promise的HTTP客户端，用于发送Ajax请求，`@types/axios`是axios库的TypeScript类型定义文件。

接下来，在项目中创建一个名为`SearchBox`的组件，用于输入关键字，并向服务器发送请求：

import React, { useState } from "react";
import axios from "axios";

type SearchResult = {
  id: number;
  name: string;
  description: string;
};

const SearchBox: React.FC = () => {
  const [query, setQuery] = useState<string>(""); // 输入框的值
  const [results, setResults] = useState<SearchResult[]>([]); // 搜索结果

  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };

  const handleSearch = async () => {
    const response = await axios.get<SearchResult[]>(
      `/api/search?q=${encodeURIComponent(query)}`
    );
    setResults(response.data);
  };

  return (
    <div>
      <input type="text" value={query} onChange={handleInputChange} />
      <button onClick={handleSearch}>搜索</button>
      <ul>
        {results.map((result) => (
          <li key={result.id}>
            <h3>{result.name}</h3>
            <p>{result.description}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default SearchBox;

在上面的代码中，我们定义了一个名为`SearchBox`的函数式组件，它包含一个输入框、一个搜索按钮和一个无序列表。当用户输入关键字并点击搜索按钮时，`handleSearch`函数将会发送一个GET请求到`/api/search`接口，并将查询字符串作为参数传递给服务器。服务器将返回一个JSON数组，包含匹配的搜索结果。我们使用`axios`库发送请求并处理响应。一旦收到响应，我们将搜索结果存储在`results`状态中，并使用`map`函数将它们渲染到无序列表中。

现在，让我们在项目中创建一个名为`server.ts`的文件，用于模拟服务器端的行为：

import express from "express";

type SearchResult = {
  id: number;
  name: string;
  description: string;
};

const data: SearchResult[] = [
  {
    id: 1,
    name: "JavaScript",
    description: "一门流行的脚本语言",
  },
  {
    id: 2,
    name: "TypeScript",
    description: "JavaScript的超集，具有强类型和面向对象的特性",
  },
  {
    id: 3,
    name: "React",
    description: "一款流行的前端UI框架",
  },
  {
    id: 4,
    name: "Angular",
    description: "一款流行的前端框架",
  },
];

const app = express();

app.get("/api/search", (req, res) => {
  const q = req.query.q as string;
  const results = data.filter((item) =>
    item.name.toLowerCase().includes(q.toLowerCase())
  );
  res.json(results);
});

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`Server is listening on port ${port}`);
});

在上面的代码中，我们使用`express`库创建了一个名为`app`的Web应用程序，它包含一个GET路由，用于处理`/api/search`请求。当收到请求后，服务器将会读取查询字符串中的`q`参数，并使用`filter`函数从`data`数组中过滤出匹配的结果。最后，服务器将结果作为JSON响应发送回客户端。在这个示例中，我们使用了一个静态的搜索结果，实际应用中，我们可以使用数据库或其他数据源来进行搜索。

最后，在项目中的`index.tsx`文件中，我们可以渲染`SearchBox`组件：

import React from "react";
import ReactDOM from "react-dom";
import SearchBox from "./SearchBox";

ReactDOM.render(<SearchBox />, document.getElementById("root"));

现在，我们可以启动应用程序并测试搜索功能了。在终端中执行以下命令：

npm start

打开浏览器，访问`http://localhost:3000`，输入关键字并点击搜索按钮，即可看到匹配的搜索结果。

这就是使用React和TypeScript实现关键字模糊查询接口的联通的示例代码。希望能对您有所帮助！