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

Question

我试图在<searchbox /> 位于另一个组件中时让 algolia Instantsearch 响应路由器 4 呈现结果。在标题导航中，我有一个正常的输入框，并且认为可以将输入的搜索词传递给 Algolia 结果页面及其搜索状态。 是否可以使用 state 或 redux 来做到这一点，或者是否有更好的选择，atm 它们似乎都非常过分，我想知道是否有更好的解决方案。

编辑：我使用 redux 表单将搜索组件的输入连接到 redux，现在它作为表单存储在那里 -> search: 'search': 'typed in to searchbox' 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 属性，无论您将其保留在何处（在属性或状态中）。