React Algolia 即时搜索 connectSearchBox答案

【问题标题】：React Algolia instantsearch connectSearchBoxReact Algolia 即时搜索 connectSearchBox
【发布时间】：2017-03-05 21:02:54
【问题描述】：

我正在使用 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(...)：必须返回一个有效的反应元素（或 NULL）。您可能返回了未定义的数组或其他无效的数组对象。

到底有什么方法可以让我将 props 传递给 MySearchBox？

【问题讨论】：

标签： javascript reactjs algolia react-instantsearch

【解决方案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> 小部件。

【讨论】：