Algolia在不同組件之間傳遞搜索狀態

我試圖讓algolia即時搜索反應路由器4呈現結果，而<searchbox />位於另一個組件中。在標題nav我有一個正常的輸入框，並認爲它可能會傳遞搜索詞，因爲它被鍵入到Algolia結果頁面和搜索狀態。是否有可能做到這一點狀態或redux或有更好的選擇，atm他們都似乎是相當過度，我想知道是否有任何更好的解決方案。Algolia在不同組件之間傳遞搜索狀態

編輯：ive連接搜索組件的輸入與redux形式redux，現在它存儲在那裏作爲形式 - >搜索：'搜索'：'鍵入搜索框' Algolia文件是一樣的下面和我需要將搜索的值發送到searchState，但我不確定如何執行此操作。

Algolia結果組件：

import React, { Component, PropTypes } from 'react'; 
import { 
    InstantSearch, 
    Hits, 
    Menu, 
    Pagination, 
    Configure, 
    ClearAll, 
} from 'react-instantsearch/dom'; 
import { Link } from 'react-router-dom'; 
import { Grid, Row, Col, Image } from 'react-bootstrap'; 
import qs from 'qs'; 

const updateAfter = 700; 

const createURL = state => `?${qs.stringify(state)}`; 

const searchStateToUrl = (props, searchState) => 
    searchState ? `${props.location.pathname}${createURL(searchState)}` : ''; 

class Algolia extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { searchState: qs.parse(props.location.search.slice(1)) }; 
    } 

    onSearchStateChange = searchState => { 
    clearTimeout(this.debouncedSetState); 
    this.debouncedSetState = setTimeout(
    () => { 
     this.props.history.push(
      searchStateToUrl(this.props, searchState), 
      searchState 
     ); 
     }, 
     updateAfter 
    ); 
    this.setState({ searchState }); 
    }; 

    render() { 
    return (
     <InstantSearch 
     appId="someappid" 
     apiKey="someapikey" 
     indexName="someindexname" 
     searchState={this.state.searchState} 
     onSearchStateChange={this.onSearchStateChange.bind(this)} 
     createURL={createURL} 
     > 
     <Configure hitsPerPage={20} /> 
     <Grid> 
      <Row> 
      <Col xs={2}> 
       <h4>Search By</h4> 
       <Menu attributeName="type" /> 
       <ClearAll /> 
      </Col> 

      <Col xs={10}> 
       <Hits hitComponent={Products}/> 
       <Pagination showLast={true} /> 
      </Col> 
      </Row> 

     </Grid> 
     </InstantSearch> 
    ); 
    } 
} 

function Products({hit}) { 
    return (
    <Col md={4}> 
     this.props.someinfo 
    </Col> 
    ); 
    } 

Algolia.propTypes = { 
    history: PropTypes.shape({ 
    push: PropTypes.func.isRequired, 
    }), 
    location: PropTypes.object.isRequired, 
}; 

export default Algolia;

searchbox.js：

import React, { Component } from 'react'; 
import { Button, InputGroup } from 'react-bootstrap'; 
import { Field, reduxForm } from 'redux-form'; 

class Searchbox extends Component { 
    constructor(props) { 
    super(props) 
    this.state = { searchAlgolia: '' }; 
    this.setInputState = this.setInputState.bind(this); 
    } 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div> 
     <form onSubmit={handleSubmit}> 
      <div> 
      <InputGroup> 
       <Field 
       name="search" 
       component="input" 
       type="text" 
       placeholder="Searc" 
       value={this.state.term} 
       onChange={event => this.setInputState(event.target.value)} 
       /> 
       <div className="input-group-btn"> 
       <Button className="btn btn-default" type="submit"><i className="fa fa-search" aria-hidden="true"></i></Button> 
       </div> 
      </InputGroup> 
      </div> 
     </form> 
     </div> 
    ); 
    } 

    setInputState(searchAlgolia) { 
    this.setState({ searchAlgolia }); 
    // console.log('state from searchbox:', searchAlgolia); 
    } 
} 

Searchbox = reduxForm({ 
    form: 'search' 
})(Searchbox); 

export default Searchbox;

來源

2017-04-11 Nicholas Ritson

之前通過searchState道具<InstantSearch>，您可以覆蓋query屬性與查詢你也喜歡從任何地方開始（從道具或狀態）。

來源

2017-04-14 16:25:53

Algolia在不同組件之間傳遞搜索狀態

回答

相關問題