Question

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

 <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"。

有人可以帮我吗？

Answer 1

您可以这样做

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

希望这会有所帮助。

Answer 2

对我来说，使用router.push可行，搜索查询与查询parameter一起传递，并且pathname可以包含您要导航到的页面。

示例：

步骤1：：导入useRouter：

import { useRouter } from "next/router";

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

 const router = useRouter();

步骤3：在Search中的事件处理程序中使用（我正在使用语义UI），并使用一种称为searchText的状态

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

您可以使用Input，我在这里使用语义UI的搜索组件：


    <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： 现在，当对我有用时，按Enter键，将调用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
      : "";

希望有帮助

在下一页中搜索结果reactjs

2 个答案: