如何在React中创建一个搜索组件（附代码示例）

Jovie
436 阅读2分钟

每个网站或网络应用可能都需要搜索功能，以获得更好的用户体验。有一堆包可以在React项目中实现搜索栏，但它们并不灵活，使得它们的可定制性降低。

在本教程中，我们将看看如何在React中借助React钩子制作一个搜索组件。

项目设置

通过在你的机器上创建react应用开始，或者打开你的浏览器并访问react.new

一个新的CodeSandbox环境将打开，并设置了React项目。

获取数据

对于搜索组件，我们将从API中获取国家的名称并显示它们。然后我们将添加搜索输入，用户可以很容易地搜索这些国家。这里是我们将获取数据的API端点：restcountries.com/v3.1/all。

在这里学习如何在React中获取数据。

// App.js
import React, { useState, useEffect } from "react";

function App() {
  const [data, setData] = useState([]);

  const fetchData = () => {
    fetch("https://restcountries.com/v3.1/all")
      .then((res) => res.json())
      .then((result) => {
        setData(result);
        console.log(result);
      });
  };

  useEffect(() => {
    fetchData();
  }, []);

  return (
    <div>
      {data.map((res) =&gt; (
        <h1>{res.name.common}</h1>
      ))}
    </div>
  );
}

export default App;

首先，我们使用 useState钩子来存储我们从API获得的所有数据。接下来，我们有fetchData函数，它从API中获取数据并更新我们的初始状态。

你可以在控制台中检查数据。

然后我们有**useEffect钩子，它只在初始渲染时调用fetchData**函数。

在JSX中，我们正在映射我们的数据状态以显示来自API的国家名称。

实现搜索功能

为了实现搜索逻辑，我们将再次利用useState钩子，将查询值保持为空字符串，我们有一个setQuery函数，将我们的查询更新为用户将在输入栏中输入的值。

// App.js
import React, { useState, useEffect } from "react";
import "./app.css";

function App() {
  const [data, setData] = useState([]);
  const [query, setQuery] = useState("");

  const fetchData = () =&gt; {
    fetch("https://restcountries.com/v3.1/all")
      .then((res) =&gt; res.json())
      .then((result) =&gt; {
        setData(result);
        console.log(result);
      });
  };

  useEffect(() =&gt; {
    fetchData();
  }, []);

  return (
    <div>
       setQuery(event.target.value)}
      /&gt;
      {data
        .filter((res) =&gt; {
          if (query === "") {
            return res;
          } else if (
            res.name.common.toLowerCase().includes(query.toLowerCase())
          ) {
            return res;
          }
        })
        .map((res) =&gt; (
          <div>
            <h1>{res.name.common}</h1>
            <img src="{res.flags.png}" alt="logo" width="{200}" height="{100}" />
          </div>
        ))}
    </div>
  );
}

export default App;

在JSX中，我们有一个过滤器函数，检查用户输入的查询是否与我们所显示的数据相匹配。简而言之，我们正在检查国家名称是否与输入字段中的值相匹配。

就这样了。这有多简单？

你可以运行你的react应用，看看搜索组件如何工作。

结论

搜索栏是每个网站都应该有的功能。我们学习了如何在React钩子的帮助下从头开始创建一个搜索栏。你可以给它添加一些CSS，使搜索栏看起来更好。继续并根据你的需要来定制它。

非常感谢您阅读本教程。

如果你有任何问题或建议，请随时评论。如果你想为某一特定主题索取任何文章，请通过 "关于 "页面联系。我很愿意听到你的意见。

avatar
文章
阅读
粉丝