过滤导航栏中的反应组件

Question

我试图在我的导航栏中实现一个搜索栏，它会显示一个城市列表，根据所选城市，它必须更新主页中的商品列表，因为商品已过滤根据城市，事实是，导航栏是一个组件，而优惠是在另一个组件中，如果我在导航栏中搜索城市并点击回车，提供组件如何监听它并根据搜索过的城市？这是我的代码：

导航栏：

class NavigationBar extends React.Component {
  constructor(props) {
    super(props);
    this.cityoffer = this.cityoffer.bind(this);
  }


  cityoffer(e) {
    e.preventDefault();
    this.props.history.push("/home");
    console.log("cities");
  }



  render(){
    const { isAuthenticated } = this.props.auth;

    const userLinks = (
      <form className="form-inline my-2 my-lg-0 ml-auto" onSubmit={this.cityoffer}>
      <input className="form-control mr-sm-2" type="search" placeholder="Cidade" aria-label="Search"/>
      <button className="btn btn-outline-success my-2 my-sm-0" type="submit">Procurar</button>

      </form>

    );

    const guestLinks = (
      <ul className="navbar-nav ml-auto">
        <li className="nav-item">
            <Link to="/login" className="nav-link">Entrar</Link>
        </li>
        <li className="nav-item">
            <Link to="/signup" className="nav-link">Registrar</Link>
        </li>
      </ul>
    );

    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
        <button className="navbar-brand brandbutton" onClick={this.brand}><img src={imglogo} className="imagemNav" alt="logo"/></button>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>
        <div className="navbar-collapse collapse w-100 order-3 dual-collapse2" id="navbarNavAltMarkup">
          { isAuthenticated ? userLinks : guestLinks }
        </div>
      </nav>
    );
  }
}

NavigationBar.propTypes = {
  auth: PropTypes.object.isRequired,
  logout: PropTypes.func.isRequired
}

function mapStateToProps(state) {
  return {
    auth: state.auth
  };
}

export default withRouter(connect(mapStateToProps, { logout })(NavigationBar));

信息：

class Anuncios extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      city: 2958,
    }
  }

  componentWillReceiveProps = (nextProps)  => {
    console.log(nextProps)
  }

  componentDidMount() {

    this.props.fetchAnuncios(this.state.city);


  }
  render() {

    return (
      <div className="pagemargin">

      <AnunciosList anuncios={this.props.anuncios}/>
      </div>
    );
  }
}

Anuncios.propTypes = {
  anuncios: PropTypes.array.isRequired,
  fetchAnuncios: PropTypes.func.isRequired,
}

function mapStateToProps(state) {
  return {
    anuncios: state.anuncios
  }
}

export default connect(mapStateToProps, {fetchAnuncios, searchCidadesRequestID})(Anuncios);

应用

class App extends Component {
  render() {
    return (
      <div className="App">
        <NavigationBar />
        <FlashMessagesList/>
      </div>
    );
  }
}

export default App;

路线：

const AppRouter = () => (
  <Router>
    <div>
      <AlertProvider template={AlertTemplate} {...options}>
      <App/>
      <Switch>
        <Route exact path="/" component={Intro}/>
        <Route path="/home" component={Home}/>
        <Route path="/signup" component={SignUp}/>
        <Route path="/login" component={LoginPage}/>
        <Route path="/filtrar" component={Filtrar}/>
        <Route path="/cupons" component={requireAuth(Cupons)}/>
        <Route path="/perfil" component={requireAuth(Perfil)}/>
        <Route path="/anuncio/:id" component={AnuncioDetalhes}/>
        <Route component={NoMatch}/>
      </Switch>
      </AlertProvider>
    </div>
  </Router>
);

像那样

：