datalist获取id传到下一个页面_Web前端：React基础项目实训（下）

大家好，我来了，本期为大家带来的前端开发知识是”Web前端：React基础项目实训（下）“，有兴趣做前端的朋友，和我一起来看看吧！

主要内容

1. 基本搜索功能
2. 搜索页面及路由
3. 列表组件
4. 滚动加载更多
5. 再次搜索功能
6. 搜索历史

学习目标

第一节 基本搜索功能，搜索页面及路由

1.基本搜索功能

1.提取input标签作为公共组件

SearchInput

2.监听鼠标抬起事件，判断用户按下回车键时路由跳转并携带数据

keyUpHandler 

注意：当前组件不是路由关联的页面，所以不能直接获取到路由的history对象，可以通过withRouter处理

import 

2.搜索页面及路由

1.创建搜索页面

页面分头部和列表部分，分别使用组件形式引入

import 

2.配置路由

需要配置路由参数，因为页面跳转时会携带不同的搜索关键字

{

本节作业：

实现按回车键跳转到搜索页面，并把搜索关键字传到搜索页面

第二节 头部组件、列表组件

1.头部组件

由返回图标和搜索框组成。搜索框使用公共的SearchInput组件

<

2.列表组件

在列表组件中获取数据，然后遍历数据生成页面结构，结构中的每个元素项使用公共的Item组件展示。

请求网络数据：

<

本节作业：

1.完成search页面效果

第三节 滚动加载更多

1.创建加载更多组件loadMore

创建ref，获取DOM元素

class 

2.绑定滚动事件

getBoundingClientRect().top 获取元素距离可视窗口顶部的距离

防止onscroll事件多次触发，使用节流方案

componentDidMount

3.触发父级组件中的网络请求

请求数据功能封装成函数，方便调用；因为是加载更多，所有请求到数据后要和原数据进行拼接

http

4.组件销毁前把事件取消掉

组件被销毁后，如果还有 事件、定时器、setState、网络请求等异步操作，react程序就会报错

所以在组件销毁前，必须把事件解除绑定，把定时器关闭，把setState清理了

componentWillUnmount

本节作业

实现滚动加载更多

再次搜索功能，搜索历史

1.再次搜索功能：

再次搜索时触发的是search页面的更新功能，所以再次搜索只需要在生命周期函数componentDidUpdate中就可以实现

特别注意：在componentDidUpdate中调用setState方法后会触发组件的更新，componentDidUpdate生命周期函数会再次执行，会形成死循环，所以需要使用prevProps属性判断组件是否有更新

async 

2.搜索历史

1.使用redux存储搜索关键字

2.页面更新后再次更新redux中的搜索关键字

3.SearchInput组件中显示当前页面搜索关键字

创建reducer

export 

创建actions

export 

关联search组件

import 

searchList组件中修改redux中存储的搜索关键字

需要在componentDidMount和componentDidUpdate两个生命周期函数中都修改

componentDidMount

本节作业：

1. 完成再次搜索功能，搜索历史

本次为大家带来的前端文章内容”Web前端：React基础项目实训（下）“到此结束了，对前端开发有兴趣的朋友，关注我，更多内容等你来看，我们下期再见！