最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

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组件的基本功能,打开控制台看一下

P09:Redux基础-用Redux实现ToDoList的删除功能

当然,这个案例还是有很多不足的,我们需要学习更多的知识来完善它,不要走开,下篇文章我们会继续学习。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:Redux基础-用Redux实现ToDoList的删除功能

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发