在 React js 中实现搜索答案

【问题标题】：Implement Search in React js在 React js 中实现搜索
【发布时间】：2019-06-12 12:15:08
【问题描述】：

我是 react 新手我想在https://www.trivago.in 之类的反应中实现搜索，我的 Ui 包含一个搜索框、一个下拉列表和一个提交按钮，当单击提交按钮时，我想搜索数据并将该数据显示到结果组件中，就像 Trivago 网站 中发生的情况一样，我不这样做不知道如何实现搜索，谁能给我一些参考代码。

我使用 react-router-dom 导航到结果页面，当我单击提交按钮时，它会将我导航到结果页面。我想实现搜索并发送表单数据以根据文本输入进行搜索..

import React,{ Component } from 'react';
import './App.css';
import logo from './case_logo.jpeg';
import { Link } from 'react-router-dom';
import Result from './Result';
import AdvanceFilter from './AdvanceFilter';

import SearchComponent from './components/SearchComponent';
import Footer from './components/Footer';
class App extends Component {
  constructor(){
    super();
    this.handleClick = this.handleClick.bind(this);
    this.state = {
      click: false,
    }
  }

     handleClick() {
        console.log("Sbbmit button clicked");
        this.setState({
            click:true,
        });
    }

render(){
  const { click } = this.state;
  if(click){
    return(
        <Result />
    );

  }

  return (
    <div className="body">
    <div className="h-100">
      <div className="row">
        <div className="col-sm-12">
          <center>
          <img src ={ logo } alt="logo" id="logo"/>
          </center>
        </div>
          {/**Search Form*/}
          <div className="col-sm-12">
                <div className="d-flex justify-content-center">
                    <form className="input-group col-sm-8" action="">
                    <input type="search" className="form-control" placeholder="Search"/>

             <div className="drop_down input-group-append">
                 <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" > Dropdown button</button>
                   <div className="dropdown-menu" aria-labelledby="dropdownMenuButton">
                     <a className="dropdown-item" href="#">Action</a>
                     <a className="dropdown-item" href="#">Another action</a>
                     <a className="dropdown-item" href="#">Something else here</a>
                    </div>
              </div>

               <Link to='/Result'><button type="submit" className="btn btn-secondary" style={{marginLeft: '5px'}} >Search</button></Link>
            </form>

      </div>
     </div>
     {/**End of Search Form*/}

        </div>
        <div className="col-sm-12">
        <Link to='/AdvanceFilter' style={{float:'right', marginRight:'250px', marginTop:'10px '}}>Advance Filter</Link>
        </div>
    </div>
    <Footer />
</div>


  );
}
}

export default App;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

商业搜索通常使用Solr 之类的方式完成，请查看此Solr tutorial。然后，您将使用 Solr API 进行搜索

【讨论】：