上一篇文章实现了《删》这个功能，那么我们继续添加下一功能--《改》

这个修改的功能是通过双击每个子选项实现

第一步：按规矩来，添加一个状态声明

第二步：action中约定我们要干什么，并且将其他元素（text）传给reducer（这里eidtTodo修改外editTodo）

第三步：reducer中区更新我们的store（相信经过注释关于...语法，map循环等不用再写注释了，大家也能明白怎么回事了）

第四步：当然是去我们的子组件编写具体实现的方法了

到了这里---改也实现了，看是不是很简单，分解步骤！

我们现在给处于编辑状态的子组件加一个边框吧！（如果是头部引用的它，那么class就是new-todo，如果是内容区域引用的话，就是edit，记住给Header添加一个自定义属性newTodo）

效果图

react+redux官方实例TODO从最简单的入门（4）-- 改的更多相关文章

  1. react+redux官方实例TODO从最简单的入门（6）-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...

  2. react+redux官方实例TODO从最简单的入门（1）-- 前言

    刚进公司的时候,一点react不会,有一个需求要改,重构页面!!!完全懵逼,一点不知道怎么办!然后就去官方文档,花了一周时间,就纯react实现了页面重构,总体来说,react还是比较简单的,由于当初 ...

  3. react+redux官方实例TODO从最简单的入门（5）-- 查

    上一篇文章<改>实现了,最后一个功能--<查>! 这个查是稍微要复杂一点的功能,官方实现的就是一个过滤数组的效果,然后展示出来,这里有3个状态,all,completed,ac ...

  4. react+redux官方实例TODO从最简单的入门（2）-- 增

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  5. react+redux官方实例TODO从最简单的入门（3）-- 删

    上一篇文章我们实现了增删改查中<增>这个功能 那么这一篇我们将实现第二个功能,删! 首先增加一个状态: actions中增加对应的约定 到reducer里面设置执行的函数(这里todo.i ...

  6. 超具体Windows版本号编译执行React Native官方实例UIExplorer项目(多图慎入)

    ),React Native技术交流4群(458982758).请不要反复加群! 欢迎各位大牛,React Native技术爱好者加入交流!同一时候博客右側欢迎微信扫描关注订阅号,移动技术干货,精彩文 ...

  7. 基于React,Redux以及wilddog的聊天室简单实现

    本文主要是使用ReactJs和Redux来实现一个聊天功能的页面,页面极其简单.使用React时间不长,还是个noob,有不对之处欢迎大家吐槽指正. 还要指出这里没有使用到websocket等技术来实 ...

  8. 用react+redux写一个todo

    概述 最近学习redux,打算用redux写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  9. 实例讲解基于 React+Redux 的前端开发流程

    原文地址:https://segmentfault.com/a/1190000005356568 前言:在当下的前端界,react 和 redux 发展得如火如荼,react 在 github 的 s ...

随机推荐

  1. 1877: [SDOI2009]晨跑

    1877: [SDOI2009]晨跑 Time Limit: 4 Sec  Memory Limit: 64 MBSubmit: 2007  Solved: 1085[Submit][Status][ ...

  2. 基于modelsim-SE的专业进阶仿真流程

    基于modelsim-SE的专业进阶仿真流程 通过<基于modelsim-SE的简单仿真流程>和<调用altera IP核的仿真流程>是否感受到仿真流程中的繁琐步骤,特别是在m ...

  3. angular

  4. spring定时器，定时器一次执行两次的问题

    Spring 定时器 方法一:注解形式 配置文件头加上如下: xmlns:task="http://www.springframework.org/schema/task" htt ...

  5. 关于我们经常用到的form表单提交

    工作中遇到了太多太多的表单提交问题,曾经学过一个HTML的表单提交给 另外一个HTML页面,对于后台怎么获取有点想不起来了. 今天便做了几个实验,提交订单到后台,来掩饰后台如何接受表单内容: 实验 一 ...

  6. OAuth2.0相关知识

    自己总结的可能有误差. 大致分为6个步骤: 1.注册相关应用,获取client_id,client_secret.2.第三方请求用户授权.用户点击按钮同意授权后,授权服务器将生成一个用户凭证(code ...

  7. VirtualBox内ubuntu10.10系统和windows7 共享文件夹

    材料 virtualbox 4.3.0 ubuntu10.10 window 7 sp1 步骤 1.安装好虚拟机和操作系统,(具体步骤网上有很多) 2.安装虚拟机的增强功能包, 安装完成手动系统重新, ...

  8. JAVA与数据库MySQL相连接

    JDBC(Java数据库连接体系结构): 是Java实现数据库访问的应用程序编程接口,主要功能是管理存放在数据库中的数据.通过接口对象,应用程序可以完成与数据库的连接,执行SQL语句,从数据库中获取结 ...

  9. git的详细说明文档

    http://www.ihref.com/read-16369.html fork 后如何保持同步 http://www.tuicool.com/articles/6vayqen git clone ...

  10. 小尝试一下 cocos2d

    好奇 cocos2d 到底是怎样一个框架,正好有个项目需要一个游戏框架,所以稍微了解了一下.小结一下了解到的情况. 基本概念 首先呢,因为 cocos2d 是基于 pyglet 做的,你完全可以直接用 ...