Question

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

编辑：我已将搜索组件的输入连接到redux与redux表单，并将其现在存储为表单 - ＆gt;搜索：'搜索'：'输入搜索框' 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

在您将function showModal(ev) { $mdDialog.show({ contentElement: '#myDialog', parent: angular.element(document.body), targetEvent: ev, clickOutsideToClose: true }); }道具传递给searchState之前，您可以使用您想要的查询覆盖<InstantSearch>媒体资源，无论您身在何处？保持它（在道具或州）。

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

1 个答案: