Question

所以我有一个NextJS项目，在主页上有一个按钮，当您单击它时，它将打开一个带输入字段的模式，您可以在其中搜索内容。

搜索返回一个项目列表，当我按Enter键时，我希望它重定向到列表中的第一个项目。

不幸的是，当我按“ Enter”键时，模式关闭并且页面刷新，然后重定向。

这是我按Enter键时运行的方法

    private selectFirstActivityOrSport = () => {
    const { closeSportsSearchModal, sports } = this.props;
    const firstActivityWithSessions = this.state.eventSearchResults.find((activity) => activity.session);

    if (firstActivityWithSessions) {
      this.props.router.push(
        `/${this.locale}/activity/${firstActivityWithSessions.slug}/${firstActivityWithSessions.session[0].id}`
      );
      return;
    }
    if (this.state.sportsResults && this.state.sportsResults.length) {
      const sportId = this.state.sportsResults[0].id;
      const selectedSports = findChildAndParentSportsFromParentId(sportId, sports);
      const sportIds = selectedSports.map((sport) => {
        return sport.id;
      });
      this.selectSport(sportIds);
      helpers.trackSearchSportClickEvent(selectedSports);
      closeSportsSearchModal && closeSportsSearchModal();
    }
  };

这是我的<SearchInput />组件

<SearchInput
  onChange={this.handleSearchChanged}
  onKeyPress={this.selectFirstActivityOrSport}
  value={description}
  placeholder={t("locationSearch.searchBar.placeholder")}
/>

这就是被称为onKeyPress

的方法

    const setSelectionOnEnterKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
      if (e.key === "Enter") {
        e.preventDefault();
        onKeyPress();
      }
    };

这是输入

    <input
      type="text"
      ref={inputRef}
      placeholder={placeholder}
      onChange={onChange}
      onKeyPress={setSelectionOnEnterKeyPress}
      value={value}
    />

我已经尝试了几乎所有内容，并且不明白为什么Next在重定向之前刷新主页。

我知道是路由器引起刷新，因为如果我评论router.push（）和console.log（），就不会刷新。

有人遇到过这个问题吗？

谢谢

如何防止在NextJS中重定向页面之前刷新页面

0 个答案: