本章主要内容有基本搜索功能、搜索页面及路由、列表组件、滚动加载更多、再次搜索功能和搜索历史。
第一节 基本搜索功能,搜索页面及路由
1.基本搜索功能
1.提取input标签作为公共组件
SearchInput.jsx:
<input
type="text"
value={this.state.searchValue}
className="search-input"
placeholder="请输入搜索内容"
onKeyUp={this.keyUpHandler}
onChange={this.inputChangeHandler.bind(this)}
/>
2.监听鼠标抬起事件,判断用户按下回车键时路由跳转并携带数据
keyUpHandler = (event) => {
if (event.keyCode === 13) {
// 跳转到search页面
this.props.history.push("/search/" + this.state.searchValue)
}
}
注意:当前组件不是路由关联的页面,所以不能直接获取到路由的history对象,可以通过withRouter处理
import { withRouter } from "react-router "
Exprot default class SearchInput extends React.Component{
}
export default withRouter(SearchInput)
2.搜索页面及路由
1.创建搜索页面
页面分头部和列表部分,分别使用组件形式引入
2.配置路由
需要配置路由参数,因为页面跳转时会携带不同的搜索关键字
{/* 路由参数后面的问号:作用是用户传递或者不传递,都要匹配路由 */}
<Route path='/search/:skeyword?' component={Search} />
本节作业:
实现按回车键跳转到搜索页面,并把搜索关键字传到搜索页面
第二节 头部组件、列表组件
1.头部组件
由返回图标和搜索框组成。搜索框使用公共的SearchInput组件
2.列表组件
在列表组件中获取数据,然后遍历数据生成页面结构,结构中的每个元素项使用公共的Item组件展示。
请求网络数据:
本节作业:
1.完成search页面效果
第三节 滚动加载更多
1.创建加载更多组件loadMore
创建ref,获取DOM元素
2.绑定滚动事件
getBoundingClientRect().top 获取元素距离可视窗口顶部的距离
防止onscroll事件多次触发,使用节流方案
3.触发父级组件中的网络请求
请求数据功能封装成函数,方便调用;因为是加载更多,所有请求到数据后要和原数据进行拼接
4.组件销毁前把事件取消掉
组件被销毁后,如果还有 事件、定时器、setState、网络请求等异步操作,react程序就会报错
所以在组件销毁前,必须把事件解除绑定,把定时器关闭,把setState清理了
componentWillUnmount() {
window.onscroll = null;
this.state=(state,callback)=>{
return
}
}
本节作业
实现滚动加载更多
第五节 再次搜索功能,搜索历史
1.再次搜索功能:
再次搜索时触发的是search页面的更新功能,所以再次搜索只需要在生命周期函数componentDidUpdate中就可以实现
特别注意:在componentDidUpdate中调用setState方法后会触发组件的更新,componentDidUpdate生命周期函数会再次执行,会形成死循环,所以需要使用prevProps属性判断组件是否有更新
2.搜索历史
1.使用redux存储搜索关键字
2.页面更新后再次更新redux中的搜索关键字
3.SearchInput组件中显示当前页面搜索关键字
创建reducer
export default function searchReducer(state={kw:''},action){
switch(action.type){
case "CHANGEKW":
state.kw = action.data
return {...state}
default:
return state
}
}
创建actions
export function ChangeKW(keyword){
return{
type:'CHANGEKW',
data:keyword
}
}
关联search组件
本节作业:
- 完成再次搜索功能,搜索历史