React Algolia instantsearch connectSearchBox

Question

私はconnectSearchBoxを使ってAlgolia React InstantSearchを使用してカスタム入力を作成しています。私は現在、これをやっている方法は以下の通りです：

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

し、次のコード

はインスタンス化する：

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

は、これは完璧に動作します。しかし、私がしたいことは、MySearchBoxに小道具を渡すことができるということです。 、最終的に

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

：しかし、このコードを実行している、私は次のエラーを取得する

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

：

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

またはこの：だから私はこのような何かをMySearchBoxに小道具を渡す方法は何ですか？

Answer 1

あなたは、単にあなたのカスタム検索ボックスに小道具を渡すと、このようにそれらを取得することができます。

カスタムサーチ：

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

使用法：

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

はまた、私たちは今、転送されていますon*イベントが<SearchBox>ウィジェットに渡されました。