javascript - 如何处理导入到主组件中的 NavBar 内的搜索栏中的搜索？

Question

圣诞快乐，节日快乐。我有一个包含搜索栏的导航栏。NavBar 用于包含路由的组件中。所以导航栏显示在所有页面上。如何使用 SearchBar 仅在主页上显示搜索内容？

这是路线中的导航栏

  <FirstNav />
          <MiddleNav onSubmit={this.handleSearch} onChange={this.handleTerm(e)} />
          <LastNav />

          <Router history={history}>
            <Route exact path={"/"} component={Home} />
            <Route path={`/cart`} component={Cart} />

这是我的包含搜索栏的导航栏：

...
 <div className="col-lg-6 col-12 order-lg-2 order-3 text-lg-left text-right">
              <div className="header_search">
                <div className="header_search_content">
                  <div className="header_search_form_container">
                    <form
                      onSubmit={this.props.handleSearch}
                      className="header_search_form clearfix"
                    >
                      <input
                        onChange={this.props.searchTerm(e)}
                        type="search"
                        required="required"
                        className="header_search_input"
                        placeholder="Search for products..."
                      />
                      {/*  <div
                        className="custom_dropdown"
                        style={{ display: "block" }}
                      >
                        <div className="custom_dropdown_list">
                          {" "}
                          <span className="custom_dropdown_placeholder clc">
                            All Categories
                          </span>{" "}
                          <ExpandMoreIcon />
                         
                        </div>
                      </div> */}
                      <button
                        id="search-button"
                        type="submit"
                        className="primary header_search_button trans_300"
                        value="Submit"
                      >
                        <img
                          src="https://res.cloudinary.com/dxfq3iotg/image/upload/v1560918770/search.png"
                          alt=""
                        />
                      </button>
                    </form>
                  </div>
                </div>
...

如何在这里进行搜索

标签： javascripthtmlnode.jsreactjs