React 路由器 DOM 搜索输入重置：终极指南

2024-03-15 22:22:39

在 React 路由器 DOM 中重置搜索输入字段：终极指南

引言

在 React 路由器 DOM 中实施搜索功能时，重置按钮有时无法重置搜索输入字段。这可能是由于在处理表单状态时出现问题造成的。本文将引导你一步步解决此问题，确保重置按钮正常工作。

1. 使用 `useForm` 管理表单状态

第一步是使用 useForm Hook 来管理表单状态。useForm 提供了一个 onResetForm 函数，可以重置表单状态，包括输入字段。

const { searchText, onInputChange, onResetForm } = useForm({
  searchText: query || "",
});

2. 将 `useForm` 的 `onResetForm` 函数传递给重置按钮

接下来，将 useForm 的 onResetForm 函数传递给重置按钮。这将允许重置按钮重置表单状态。

<button onClick={onResetSearch} className="btn btn-outline-danger mt-2">Reset</button>

3. 使用 `useSearchParams` 管理搜索查询参数

下一步是使用 useSearchParams Hook 来管理搜索查询参数。useSearchParams 提供了一个 setSearchParams({}) 函数，可以重置查询参数。

const [searchParams, setSearchParams] = useSearchParams(); // Initialize with the current query string

4. 在重置函数中重置查询参数

最后，在重置函数中使用 setSearchParams({}) 来重置查询参数。这将清除所有查询参数，包括搜索查询。

const onResetSearch = () => {
  event.preventDefault();
  setBusco(false);
  setSearchParams({});
  onResetForm();
  navigate("/search");
};

完整代码示例

以下是完整的代码示例，展示了如何将所有这些步骤结合在一起：

import { useForm, useSearchParams } from "react-router-dom";

const { searchText, onInputChange, onResetForm } = useForm({
  searchText: query || "",
});

const [searchParams, setSearchParams] = useSearchParams(); // Initialize with the current query string

const onResetSearch = () => {
  event.preventDefault();
  setBusco(false);
  setSearchParams({});
  onResetForm();
  navigate("/search");
};

return (
  <>
    <form onSubmit={onSearchSubmit}>
      <input type="text" value={searchText} onChange={onInputChange} />
      <button type="submit" className="btn btn-primary mt-2">Search</button>
    </form>
    <button onClick={onResetSearch} className="btn btn-outline-danger mt-2">Reset</button>
  </>
);