React Algolia instantsearch connectSearchBox

时间:2017-03-05 21:02:54

标签: javascript reactjs algolia react-instantsearch

我正在使用Algolia React InstantSearch,使用connectSearchBox创建自定义输入。我目前正在这样做的方式如下:

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。所以我做了这样的事情:

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

或者这个:

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

但是,运行此代码,我收到以下错误:

  

MYSEARCHBOX(...):必须返回有效的反映元素(或空)。   您可能已经退回未定义,阵列或其他一些无效内容   对象。

最后,我将道具传递给MySearchBox的方式是什么?

1 个答案:

答案 0 :(得分:3)

您只需将道具传递到自定义搜索框并按照以下方式检索它们:

自定义搜索框:

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>个事件。