React Instant Search восстанавливает правильные данные в функции - PullRequest
Новая
       15

React Instant Search восстанавливает правильные данные в функции

0 голосов
/ 14 декабря 2018

Я работаю в своем первом React Project для небольшого стартапа, приложения "поиск и добавление в свою коллекцию".Для функции поиска я использую React Instant Search от Algolia.Все работы найти.

Теперь, для функции «добавить в коллекцию», я знаю, как это сделать, но я не могу восстановить данные в своей функции.Я провел небольшой тест, подобный этому: 

import React  from 'react';
import withAuthorization from './withAuthorization';
import * as firebase from 'firebase';
import {database, } from '../firebase/firebase';
import Image from 'react-image-resizer';
import{InstantSearch, SearchBox, Hits, Highlight, RefinementList} from "react-instantsearch/dom";
import { orderBy } from "lodash";


function addToCollection({hit}) {
  console.log('-----');
  console.log('The selected item is:', hit);
  console.log('------');
}

const Hit = ({hit}) =>
  <div className="hit">
    <div className="hit-image">
      <img src={hit.avatarURL} height={150} width={150}/>
    </div>
    <div className="hit-content">
      <div className="hit-marque">
        {hit.marque}
      </div>
      <div className="hit-numero">
        {hit.numero}
      </div>
      <div className="hit-marquesuite">
        {hit.marquesuite}
      </div>
      <div className="hit-reference">
        {hit.reference}
      </div>
      <div className="hit-cote">
        {hit.cote}
      </div>
      <button className="btn btn-success" onClick={addToCollection}>Ajouter à ma collection</button>
    </div>
  </div>

const Content = () =>
  <div className="content container-fluid text-center">
    <div className="row">
      <div className="col-lg">
        <Hits hitComponent={Hit} key ={Hit}/>
      </div>
    </div>
  </div>

class Catalogue extends React.Component {
  constructor(){
    super();
    this.state = {
      catalogue: {},
    };


  }

  render(){

    if(this.state.catalogue === null) {
      return  <p>Le catalogue est vide</p>

    }

      return (
        <div class="container-fluid">
          <h1 className="text-center">Catalogue de capsule</h1>
          <h4 className="text-center">Rechercher une capsule</h4>
          <InstantSearch
            apiKey="a8de2c61b98e1ca62a5df03f1970f46a"
            appId="7H3CTF406R"
            indexName="catalogue">


            <SearchBox translation={{placeholder:'Rechercher une capsule'}} width="500 px"/>



            <Content />    


          </InstantSearch>

        </div>
      );
  }
}

const authCondition = (authUser) => !!authUser;

export default withAuthorization(authCondition)(Catalogue);

Итак, как я могу передать информацию о моем const "Hit" в свою функцию "addToCollection", когда я нажимаю на кнопку.

Заранее благодарен за помощь

1 Ответ

0 голосов
/ 11 января 2019 
<div className="hit-content">
    <div className="hit-marque"> {hit.marque} </div>
    <div className="hit-numero"> {hit.numero} </div>
    <div className="hit-marquesuite"> {hit.marquesuite} </div>
    <div className="hit-reference"> {hit.reference} </div>
    <div className="hit-cote"> {hit.cote} 
</div>

Как получить доступ к hit.cote и hit.avatarurl?

...