P09:Redux基础-用Redux实现ToDoList的删除功能
本文我们用Redux来制作一下删除功能,即在点击ToDoList中的列表子项时,删除对应的子项。当然如果你觉的对Redux的流程已经掌握,可以自己先尝试着作一遍,然后再来进行对比。
绑定子项响应事件
打开src目录下的TodoList.js
文件,然后找到List
组件的renderItem
属性,编写代码如下:
<div style={{margin:'10px',width:'300px'}}> <List bordered dataSource={this.state.list} renderItem={(item,index)=>(<List.Item onClick={this.deleteItem.bind(this,index)}>{item}</List.Item>)} /> </div>
然后编写这个deleteItem()
方法,记得它需要接收一个index
参数。
deleteItem(index){ console.log(index) }
这时候我们到浏览器预览一下,按F12打开控制台,可以看到点击按钮时可以看到控制台输出了对应的数组下标。
在方法里编写Redux的Action
写完绑定方法就可以写action
了,在编写时,我们要传递index过去,代码如下:
deleteItem(index){ const action = { type:'deleteItem', index } store.dispatch(action) }
reducer业务逻辑的实现
编写和传递完action
就可以到reducer.js
来编写相关的业务逻辑了。其实要作的就是删除数组下标的对应值。
if(action.type === 'deleteItem' ){ let newState = JSON.parse(JSON.stringify(state)) newState.list.splice(action.index,1) //删除数组中对应的值 return newState }
这时候就做完了这个TodoList组件的基本功能,打开控制台看一下
当然,这个案例还是有很多不足的,我们需要学习更多的知识来完善它,不要走开,下篇文章我们会继续学习。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:Redux基础-用Redux实现ToDoList的删除功能
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:Redux基础-用Redux实现ToDoList的删除功能