0

I work actually in my first React Project for a little startup, an "search and add to your collection" app. For the search feature, i use React Instant Search by Algolia. Everything work find.

Now, for the "add to collection" feature, i know how to do that, but I can not recover the data in my function. I did a little test like this: 

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);

So, how can I transmit the information of my const "Hit" to my function "addToCollection" when I click on button.

Thank in advance for your help

4

1 回答 1

0 
<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？

于 2019-01-10T21:06:07.783 回答