Question

我是新手我想在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;

Answer 1

通常使用Solr之类的东西来进行商业搜索，请查看此Solr tutorial。然后，您将使用Solr API进行搜索

在React js中实现搜索

1 个答案: