Réagir Algolia instantsearch connectSearchBox

Question

J'utilise Algolia React InstantSearch, avec connectSearchBox pour créer une entrée personnalisée. La façon dont je suis en train de faire cela est ci-dessous:

const MySearchBox = connectSearchBox(({currentRefinement, refine}) => { 
    return (
     <input 
     type="text" 
     placeholder="Search" 
     value={currentRefinement} 
     onFocus={()=> props.onFocus()} 
     onBlur={()=> props.onBlur()} 
     onChange={(e) => {refine(e.target.value)}} 
     /> 
    ); 
    }); 

Et puis le code suivant à instancier:

<InstantSearch 
    onSearchStateChange={(result) => this.onSearchChange(result)} 
    appId={appId} 
    apiKey={apiKey} 
    indexName={index}> 
    <MySearchBox/> 
</InstantSearch> 

Cela fonctionne parfaitement. Cependant, ce que je voudrais faire est de pouvoir passer des accessoires à MySearchBox. Alors je fais quelque chose comme ceci:

const MySearchBox = (props) => { 
    connectSearchBox(({currentRefinement, refine}) => { 
    return (
     <input 
     type="text" 
     .... 
     /> 
    ); 
    }) 
} 

Ou ceci:

const MySearchBox = React.createClass({ 
    render() { 
    return (
     connectSearchBox(({currentRefinement, refine}) => { 
     return (
      <input 
      type="text" 
      /> 
     ); 
     }) 
    ) 
    } 
}); 

Cependant, l'exécution de ce code, je reçois l'erreur suivante:

MYSEARCHBOX(...): A VALID REACT ELEMENT (OR NULL) MUST BE RETURNED. YOU MAY HAVE RETURNED UNDEFINED, AN ARRAY OR SOME OTHER INVALID OBJECT.

En fin de compte, Qu'est-ce qu'un moyen pour moi de passer des accessoires à MySearchBox?

Answer 1

Vous pouvez simplement passer des accessoires à votre boîte de recherche personnalisée et les récupérer comme ceci:

personnalisés SearchBox:

const MySearchBox = connectSearchBox(({ onFocus, onBlur, currentRefinement, refine }) => { 
    return (
    <input 
     type="text" 
     placeholder="Search" 
     value={currentRefinement} 
     onFocus={() => onFocus()} 
     onBlur={() => onBlur()} 
     onChange={e => { 
     refine(e.target.value); 
     }} 
    /> 
); 
}); 

Utilisation:

<MySearchBox onFocus={} onBlur={} /> 

, nous sommes maintenant transmettre le on* événements passés au widget <SearchBox>.