[英]How do I do search autocomplete with React and Redux?
我有一个名为Home
的组件,看起来像:
render () {
const clips = ObjectPath.get(this.props, 'search.data.clips.results', [])
return (
<div className='search__container right-content-wrapper'>
<SearchInput
value={this.props.autocomplete.query.q}
placeholder='Search all the Vidys'
status={this.props.autocomplete.status}
hints={this.props.autocomplete.data}
onType={this.props.onAutocomplete}
onSubmit={this.props.onSearch}
/>
<SearchResults
results={clips}
location={this.props.location}
status={this.props.search.status}
/>
</div>
)
}
我的SearchInput
看起来像:
render () {
const { value, hints, status } = this.props
const hasResults = hints.length
const areResultsVisible = hasResults && !this.state.hideAutocompleteResults && this.state.hasFocus
return (
<div className= {`search-input__component ${status}`}>
{this.props.showLogo && (
<a href="javascript:void(0);" className="logo-on-search"></a>
)}
<div className='input'>
<input
type='text'
className='input-field'
value={value}
placeholder={this.state.placeholder}
onFocus={::this.onFocus}
onBlur={::this.onBlur}
onKeyUp={::this.onKeyUp}
onKeyDown={::this.hanleArrowKeys}
onChange={::this.onChange}
/>
</div>
<button className="btn emoji"></button>
<button className='btn submit' onClick={() => this.onSubmit()}></button>
{(() => {
if (!areResultsVisible && false) return
const springConfig = {
stiffness: 600,
damping: 30
}
return <StaggeredMotion
defaultStyles={hints.map((item) => ({ x: -10, o: 0, z: 1.1 }))}
styles={(prevInterpolatedStyles) => prevInterpolatedStyles.map((_, i) => (
i === 0
? {
o: spring(1, springConfig),
x: spring(1, springConfig),
z: spring(1, springConfig)
}
: {
o: spring(prevInterpolatedStyles[i - 1].o, springConfig),
x: spring(prevInterpolatedStyles[i - 1].x, springConfig),
z: spring(prevInterpolatedStyles[i - 1].z, springConfig)
}
))}
>
{(styles) => (
<div className='hints'>
{styles.map((style, i) => (
<div
key={i}
className={`hint${i === this.state.hintSelection ? ' selected' : ''} ${hints[i].type}`}
onClick={() => this.onHintClick(hints[i])}
onMouseEnter={() => this.setState({ hintSelection: i })}
style={{
transform: `translateX(${style.x}px)`,
opacity: style.o
}}
>
<div className='hint-content'>
<div className='hint-title'>{this.highlightMatch(hints[i])}</div>
{(() => hints[i].type !== 'phrase' && <div className='hint-type'>{hints[i].type}</div>)()}
</div>
</div>
))}
</div>
)}
</StaggeredMotion>
})()}
</div>
)
}
因此,我意识到我需要重组大量的内容,因此我在寻找一般指导而非特定帮助。 我对React和redux
相对较新,所以我可能并不了解。 我觉得我需要以某种方式在SearchInput
建立connect
以进行实际的搜索和自动完成。 有任何想法吗?
SearchInput组件应对输入标签的每次更改(在输入标签的onChange函数中)提出ajax请求。 在ajax的回调函数中,新数据(新提示)应传递给Redux操作,以使用该数据更新商店。 商店的更新将触发具有新提示的组件的重新渲染,作为商店中的新道具。
应该使用输入标签的onChange函数中的setState函数将搜索文本本身存储在组件的状态中。 这将允许搜索的ajax请求(单击搜索按钮并使用该ajax请求触发事件函数之后)将文本输入作为简单状态变量获取。
单击搜索按钮后,应使用相同的体系结构更新搜索结果。
祝好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.