Событие onBlur, не позволяющее щелкать ссылки для регистрации

Question

У меня есть панель навигации с React-InstantSearch: <SearchBox />, которая предоставляет мне автозаполнение, есть событие onChange, которое показывает окно предложений.Существует также событие onBlur, которое срабатывает, когда вы покидаете окно поиска и скрывает поле.Это onBlur событие предотвращает срабатывание клика по ссылке.(Проверено, удалив его).У кого-нибудь есть предложения, как мне это исправить?Код ниже:

Relevant Portion of App.js

render() {
    if (this.state.redirect) {
      return (
        <div className="App-container">
          <InstantSearch
            appId="{MY APP ID}"
            apiKey={process.env.REACT_APP_ALGOLIA_API_KEY}
            indexName="blog_posts"
          >
            <NavigationBar
              loggedIn={this.state.loggedIn}
              handleLogout={this.handleLogout}
              username={this.state.username}
            />
            <Redirect to="/" />;
          </InstantSearch>
        </div>
      );
    }

    return (
      <div className="App-container">
        <InstantSearch
          appId="{MY APP ID}"
          apiKey={process.env.REACT_APP_ALGOLIA_API_KEY}
          indexName="blog_posts"
        >
          <NavigationBar
            loggedIn={this.state.loggedIn}
            handleLogout={this.handleLogout}
            username={this.state.username}
          />
          <Switch>
            <Route exact path="/" />
            <Route path="/posts" component={PostListView} />
            <Route
              path="/post/:postID"
              render={props => (
                <PostDetailView
                  {...props}
                  loggedIn={this.state.loggedIn}
                  username={this.state.username}
                  deleteComment={this.deleteComment}
                />
              )}
            />
            <Route
              path="/login"
              render={props => (
                <LoginForm {...props} handleLogin={this.handleLogin} />
              )}
            />
          </Switch>
        </InstantSearch>
      </div>
    );
  }
}

export default App;

NavigationBar.js

import React, { Component } from "react";
import { Navbar, Nav, NavItem } from "react-bootstrap";
import { Link } from "react-router-dom";
import PropTypes from "prop-types";
import { Hits, SearchBox, Highlight } from "react-instantsearch-dom";

import CompanyHeader from "../config/settings.js";

/**
 * Navigation Bar for App
 * Utilizes react-bootstrap
 * @extends Component
 */
class NavigationBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hitResultsShown: false
    };

    this.onChange = this.onChange.bind(this);
    this.onBlur = this.onBlur.bind(this);
  }

  onChange() {
    this.setState({
      hitResultsShown: true
    });
  }

  onBlur(e) {
    this.setState({
      hitResultsShown: false
    });
    e.target.value = "";
  }

  render() {
    const logged_in_nav = (
      <React.Fragment>
        <NavItem eventKey={2} href="#">
          {`Hello, ${this.props.username}`}
        </NavItem>
        <NavItem eventKey={3} onClick={this.props.handleLogout}>
          Logout
        </NavItem>
      </React.Fragment>
    );

    const logged_out_nav = (
      <React.Fragment>
        <NavItem eventKey={2} href="/login">
          Log In
        </NavItem>
        <NavItem eventKey={3} href="/signup">
          SignUp
        </NavItem>
      </React.Fragment>
    );

    return (
      // Instantiate a Navbar with:
      //   Dark Theme
      //   Full-width
      //   sticks to top of viewport
      <Navbar inverse fluid fixedTop>
        <Navbar.Header>
          <Navbar.Brand>
            <a href="/">{CompanyHeader}</a>
          </Navbar.Brand>
          <Navbar.Toggle />
        </Navbar.Header>
        <Navbar.Collapse>
          <Nav>
            <NavItem eventKey={1} href="/random">
              Random Post
            </NavItem>
            {this.props.loggedIn ? logged_in_nav : logged_out_nav}
          </Nav>

          <Navbar.Form pullRight>
            <SearchBox onChange={this.onChange} onBlur={this.onBlur} />
            {this.state.hitResultsShown ? <Hits hitComponent={PostHits} /> : ""}
          </Navbar.Form>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

class PostHits extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const hit = this.props.hit;
    return (
      <div>
        <span className="hit-name">
          <Link to={`/post/${hit.id}`}>
            <Highlight attribute="title" hit={hit} className="font--bold" />
          </Link>
        </span>
        <p className="well">
          {hit.content.length > 100 ? hit.content.slice(0, 100) : hit.content}
        </p>
      </div>
    );
  }
}

Answer 1

Это происходит потому, что ваш onBlur только оборачивает компонент Searchbox.

Когда вы нажимаете на ссылку в окне предложений, вы удаляете фокус из окна поиска и впоследствии скрываете предложения.

Всевам нужно обернуть оба элемента в onBlur, и ваша проблема будет решена:

<div onFocus={this.onChange} onBlur={this.onBlur} >
  <SearchBox />
  {this.state.hitResultsShown && <Hits hitComponent={PostHits} />}
</div>

Примечание: встроенный условный рендеринг лучше подобен ^, и onFocus будет вызывать его один раз, а не несколько раз, как onChangewill.

В такой ситуации ваш блок предложений обычно будет частью компонента поиска, поскольку он по своей сути связан, что приводит к расширению функциональности размытия / изменения в этом компоненте и делает его намного более автономным.