在下一个页面 reactjs 中搜索结果答案

【问题标题】：Search a result in next page reactjs在下一个页面 reactjs 中搜索结果
【发布时间】：2020-10-14 15:12:14
【问题描述】：

我的组件中有一个搜索栏。我想点击搜索，它应该调用搜索操作并将结果导航到父组件。

 <input 
              onKeyPress={(event) => {
             if (event.key === "Enter") {
                  this.onSearch(event.target.value);
                }
              }}
              type="text"
            />

方法：

 onSearch(searchString) {
     // perform Search
     this.props.history.push("/details");
  }

我希望它使用搜索字符串导航到详细信息页面，在 URL 中我期望类似： http://localhost:8080/details?search="searchString".

谁能帮我解决这个问题？

【问题讨论】：

您好，我的回答解决了您的问题吗？
是的，但预计每当用户为搜索结果添加书签时，他应该在激活搜索选项的情况下登陆同一页面。你能帮我解决一下吗
您可以在渲染 /details 页面的组件的 componentDidMount 方法中处理此问题：您可以检查查询参数是否存在并进行处理。希望这会有所帮助

标签： javascript reactjs typescript input routes

【解决方案1】：

对我来说，使用router.push 有效，搜索查询通过查询parameter 传递，pathname 可以包含您要导航到的页面。

例子：

第一步：导入useRouter：

import { useRouter } from "next/router";

第 2 步： 创建路由器变量：

 const router = useRouter();

第 3 步：在搜索中的事件处理程序中使用（我正在使用语义 UI）并使用名为 searchText 的状态

const [searchText, setsearchText] = useState("");

你可以使用 Input，我这里使用的是 Semantic UI 的 Search Component：


    <Search
              input={{ icon: "search", iconPosition: "left" }}
              showNoResults={false}
              selectFirstResult={true}
              placeholder="Search..."
              value={searchText}
              onSearchChange={(evt, data) => {
                setsearchText(data.value);
              }}
              onKeyPress={e => {
                if (e.key === "Enter") {
                  router.push({
                    pathname: "/listSearch",
                    query: {
                      searchQuery: searchText
                    }
                  });
                }
              }}
            />

第 4 步： 现在当我使用回车时，会调用onKeyPress，URL如下（listSearch这里是NextJS页面）：

http://www.localhost.com/listSearch?searchQuery=cds

第 5 步： 在我的例子listSearch的目标页面中，您可以输入以下代码来获取搜索字符串：

import { useRouter } from "next/router";

...

const router = useRouter();
const searchQuery =
    router && router.query && router.query && router.query.searchQuery
      ? router.query.searchQuery
      : "";

希望对你有帮助

【讨论】：

我可以路由它，但我的问题是我必须为页面添加书签以供进一步使用，这样每当我使用文本或短信将页面链接发送给某人时，他应该能够打开具有相同搜索结果的同一页面。你有什么想法吗？
如果你直接打开例如链接：http://localhost:8080/details?search="searchString"你没有得到搜索结果吗？因为对我来说它正在搜索，因为详细信息是一个页面，我已经从路由中获取了 URL 参数，如上面的答案第 5 步所示。
实际上我在我的项目中使用类组件，所以理解功能组件对我来说有点棘手。
你能帮我把目标页面写成类组件吗，所以如果我打开链接为：localhost:8080/details?search="searchString"，我会退回到相同的搜索结果
按照我回答的第 5 步操作，希望对您有所帮助。

【解决方案2】：

你可以这样做

onSearch(searchString) {
  // perform Search
  this.props.history.push("/details?search=" + encodeURIComponent(searchString));
}

希望这会有所帮助。

【讨论】：