我正在使用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的方式是什么?
答案 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>
个事件。