다른 구성 요소간에 검색 조건을 전달하는 알골리아

Question

<searchbox />이 다른 구성 요소에있는 동안 반응 라우터 4가 결과를 렌더링하기 위해 알골리아 instantsearch를 얻으려고합니다. 헤더 탐색기에서 나는 정상적인 입력 상자가 있고 Algolia 결과 페이지 및 해당 검색 상태에 입력 된 것과 같이 검색어를 전달할 수 있다고 생각했습니다. 상태 또는 redux 함께이 작업을 수행 할 수 또는이 더 나은 옵션이 있습니다. atm 그들은 모두 상당히 과도한 것으로 보인다 및 더 나은 솔루션이 있는지 궁금해합니다.

편집 : 필자는 redux와 redux 양식의 입력을 연결하여 양식으로 저장합니다. - 검색 : '검색': '검색 상자에 입력' 알골 파일은 아래와 동일합니다. 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 : 당신이 <InstantSearch>에 searchState 소품을 통과하기 전에

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; 

Answer 1

, 당신은 당신이 그것을하고자하는 쿼리와 query 속성을 재정의 할 수 당신이 그것을 지키고있는 곳 (소도구 또는 상태)에서부터 시작하십시오.