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

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

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

第二步：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. Java8 jvm参数

    jmap输出 [tomcat@n01 ~]$ /opt/java/jdk1..0_101/bin/jmap -heap Attaching to process ID , please wait... ...

  2. [LeetCode] Russian Doll Envelopes 俄罗斯娃娃信封

    You have a number of envelopes with widths and heights given as a pair of integers (w, h). One envel ...

  3. SQL Server数据库设计规范

    数据库设计规范 1.简介 数据库设计是指对一个给定的应用环境,构造最优的数据库模式,建立数据库及其他应用系统,使之能有效地存储数据,满足各种用户的需求.数据库设计过程中命名规范很是重要,命名规范合理的 ...

  4. CF719E（线段树+矩阵快速幂）

    题意:给你一个数列a,a[i]表示斐波那契数列的下标为a[i],求区间对应斐波那契数列数字的和,还要求能够维护对区间内所有下标加d的操作 分析:线段树 线段树的每个节点表示(f[i],f[i-1])这 ...

  5. mysql的explain学习

    explain是用来获取sql执行计划的信息. 上面是一个最简单的sql分析.下面来分析每列的意思. ①id  ②select_type ③ table ④type ⑤possible_key ⑥ke ...

  6. JQuery选择器

    动态修改样式 $("#div1").attr("display","block"); //有问题 $("#div1"). ...

  7. NC6开发配置流程

    1.功能注册 2.菜单注册 3.单据类型管理 4.单据模板初始化 5.查询模板初始化 6.功能节点默认模板设置 7.编码对象注册.编码规则定义

  8. 个人作业-Week3：代码复审

    软件工程师的成长 我在上大学之前,对于软件工程师之类并无概念,并且高初中的电脑课也从未提及过写代码之类的东西,更多的都是一些教一些办公软件的使用(笑,明明电脑课总是因为老师“有事”变成其他课,根本就没 ...

  9. memcache占用CPU过高的解决办法

    Simon最近为公司服务器操碎了心 , 先是mysqld进程占用CPU过高 , 导致服务器性能变低 ,网站打开太慢.通过增加max_connections及table_cache解决了问题 ,随后发现 ...

  10. jquery使用案例

    表单验证 Dom实现表单验证 通过在form标签的submit上绑定一个onclick事件,用户点击事,触发这个事件,执行Checkvalid()函数进行对表单中的元素值验证,验证通过之后,继续让su ...