大家好，很高兴又见面了，我是姜茶的编程笔记，我们一起关注、学习前端相关领域技术，共同进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力

封面图: 喜欢的可以在评论区告诉我，我发你原图哦

在现代 Web 开发中，动态搜索表单是一个常见的需求。本文将介绍如何使用 React 和 Next.js 创建一个动态搜索表单，并将搜索状态与 URL 同步，以便于用户分享和保存搜索结果。

代码概述

我们将创建一个名为 SearchForm 的 React 函数组件，该组件接收一个 search 属性，并使用该属性初始化搜索输入框的状态。组件还将处理表单提交事件，并将搜索状态更新到 URL 中。

完整代码

以下是实现该功能的完整代码，并包含了中文注释：

import { useRouter, usePathname } from 'next/navigation';
import { useSearchParams } from 'next/navigation';
import { useState } from 'react';

export default function SearchForm({
  search,
}: {
  // 提取 `URLSearchParams` 并将其传递给组件
  search: string | undefined;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

  const [searchText, setSearchText] = useState(search ?? "");

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();

        // 使用 `URLSearchParams` 将状态更新到 URL 中
        const newSearchParams = new globalThis.URLSearchParams(searchParams);
        newSearchParams.set("search", searchText);
        router.push(`${pathname}?${newSearchParams.toString()}`);
      }}
    >
      <Input
        type="search"
        name="search"
        value={searchText}
        onChange={setSearchText}
      />
    </form>
  );
}

代码浅析

定义 SearchForm 组件

export default function SearchForm({
  search,
}: {
  /// 提取 `URLSearchParams` 并将其传递给组件
  search: string | undefined;
}) {
  const router = useRouter();
  const searchParams = useSearchParams();
  const pathname = usePathname();

SearchForm 是一个接收 search 属性的函数组件。我们使用 useRouter 获取路由对象，用 useSearchParams 获取当前 URL 的搜索参数，用 usePathname 获取当前路径名。

渲染表单

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();

        /// 使用 `URLSearchParams` 将状态更新到 URL 中
        const newSearchParams = new globalThis.URLSearchParams(searchParams);
        newSearchParams.set("search", searchText);
        router.push(`${pathname}?${newSearchParams.toString()}`);
      }}
    >
      <Input
        type="search"
        name="search"
        value={searchText}
        onChange={setSearchText}
      />
    </form>
  );
}

当表单提交时，函数首先阻止默认的提交行为，然后使用 URLSearchParams 创建一个新的搜索参数对象，更新搜索参数为当前的 searchText，并使用 router.push 方法将新的搜索参数推送到 URL 中。

代码中globalThis 是一个全局对象，可以在任何环境中访问全局对象（例如 window 在浏览器中，global 在 Node.js 中）。URLSearchParams 是一个用于处理 URL 查询参数的接口。

总结

我们学习了:

• 如何使用 React 和 Next.js 创建一个动态搜索表单
• 将搜索状态同步到 URL 中。这样做不仅提升了用户体验，还使得用户可以方便地分享和保存搜索结果。

喜欢看图的同学 ：

最后

如果你有任何问题或建议，欢迎在评论区留言交流！

Happy coding!