Algolia在不同组件之间传递搜索状态

Question

当<searchbox />在另一个组件中时，我正在尝试让algolia即时搜索react路由器4来呈现结果。在标题nav中，我有一个普通的输入框，我想也许可以在输入搜索词时将其传递到Algolia结果页面和它的搜索状态。有没有可能用state或redux来做这件事，或者有更好的选择，atm，它们看起来都太多了，我想知道是否有更好的解决方案。

编辑:我已经连接了搜索组件的输入到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;

Answer 1

在将searchState属性传递给<InstantSearch>之前，您可以从保存该属性的位置(在属性或状态中)使用您希望它开始的查询覆盖query属性。