React Hooks 搜索输入按键输入重定向结果页面
React Hooks seacrh input keypress enter redirect result page
我有一个搜索组件。当输入按键输入重定向到结果页面。但我无法获得搜索过滤结果。如何过滤 json?这是代码,谁能帮帮我?
这里是它如何工作的演示 Sandbox。当然,你需要重构代码。
想法是当您按下键时,您需要在 URL 的查询参数中传递搜索词:
history.push(`/SearchResult/?search=${search}`);
在此页面上,您需要从 URL 获取参数并使用 useLocation
:
import { useLocation } from "react-router-dom";
并使用 URLSearchParams:
解析结果
const search = new URLSearchParams(location.search).get("query");
请查看提供的示例中的更多详细信息。
首先将其添加到您的路线中。因为你只声明了 SearchResult
路由而不是 SearchResultPage
不管他们使用相同的 comp
{
path: `/SearchResultPage`,
component: SearchResult
}
设置上下文:
export const Context = createContext();
和提供商:
const Provider = ({ children }) => {
const [gameIds, setGameIds] = useState([]);
const provider = useMemo(() => ({ gameIds, setGameIds }), [
gameIds,
setGameIds
]);
return (
<Context.Provider value={{ ...provider }}>{children}</Context.Provider>
);
};
能够全局保存变量。
将 id 保存到搜索组件的数组中:
const { setGameIds } = useContext(Context);
...
setGames(gameData);
setSearch(e.target.value);
setGameIds(gameData.map(({ id }) => id));
在 SearchResult
上检索它们
const { gameIds } = useContext(Context);
...
data.filter(({ id }) => gameIds.includes(id))
我有一个搜索组件。当输入按键输入重定向到结果页面。但我无法获得搜索过滤结果。如何过滤 json?这是代码,谁能帮帮我?
这里是它如何工作的演示 Sandbox。当然,你需要重构代码。
想法是当您按下键时,您需要在 URL 的查询参数中传递搜索词:
history.push(`/SearchResult/?search=${search}`);
在此页面上,您需要从 URL 获取参数并使用 useLocation
:
import { useLocation } from "react-router-dom";
并使用 URLSearchParams:
解析结果const search = new URLSearchParams(location.search).get("query");
请查看提供的示例中的更多详细信息。
首先将其添加到您的路线中。因为你只声明了 SearchResult
路由而不是 SearchResultPage
不管他们使用相同的 comp
{
path: `/SearchResultPage`,
component: SearchResult
}
设置上下文:
export const Context = createContext();
和提供商:
const Provider = ({ children }) => {
const [gameIds, setGameIds] = useState([]);
const provider = useMemo(() => ({ gameIds, setGameIds }), [
gameIds,
setGameIds
]);
return (
<Context.Provider value={{ ...provider }}>{children}</Context.Provider>
);
};
能够全局保存变量。
将 id 保存到搜索组件的数组中:
const { setGameIds } = useContext(Context);
...
setGames(gameData);
setSearch(e.target.value);
setGameIds(gameData.map(({ id }) => id));
在 SearchResult
const { gameIds } = useContext(Context);
...
data.filter(({ id }) => gameIds.includes(id))