Sha*_*oon -1 reactjs react-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>
)
}
Run Code Online (Sandbox Code Playgroud)
我的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>
)
}
Run Code Online (Sandbox Code Playgroud)
所以我意识到我需要重组大量的东西,所以我正在寻找一般指导而不是具体帮助。我对 React 和 比较陌生redux
,所以我可能不了解这一切。我觉得我莫名其妙地需要建立一个connect
在SearchInput
做实际的搜索和自动完成。有任何想法吗?
小智 5
SearchInput 组件应该对 input 标签的每次更改(在 input 标签的 onChange 函数中)发出一个 ajax 请求。在 ajax 的回调函数中,新数据(新提示)应该传递给 Redux 操作以使用该数据更新存储。store 的更新将触发重新渲染具有新提示的组件作为 store 的新道具。
搜索文本本身应该使用 input 标签的 onChange 函数中的 setState 函数存储在组件的状态中。这将允许搜索的 ajax 请求(在单击搜索按钮并使用该 ajax 请求触发事件函数之后)获取文本输入作为简单的状态变量。
单击搜索按钮后,应使用相同的架构来更新搜索结果。
祝你好运!
归档时间: |
|
查看次数: |
2864 次 |
最近记录: |