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

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

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

第二步：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. 解读ASP.NET 5 & MVC6系列（16）：自定义View视图文件查找逻辑

    之前MVC5和之前的版本中,我们要想对View文件的路径进行控制的话,则必须要对IViewEngine接口的FindPartialView或FindView方法进行重写,所有的视图引擎都继承于该IVi ...

  2. [LeetCode] Lowest Common Ancestor of a Binary Tree 二叉树的最小共同父节点

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  3. [LeetCode] N-Queens N皇后问题

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  4. 一个python的邮件发送脚本，自动，定时，可以附件发送，抄送，附有说明文件

    #!/bin/env python # -*- coding: utf-8 -*- import datetime import smtplib import os,sys from email.mi ...

  5. 对于多个数据库表对应一个Model问题的思考

    最近做项目遇到一个场景,就是客户要求为其下属的每一个分支机构建一个表存储相关数据,而这些表的结构都是一样的,只是分属于不同的机构.这个问题抽象一下就是多个数据库表对应一个Model(或者叫实体类).有 ...

  6. 用Model-View-ViewModel构建iOS App(转)

    转载自 Model-View-ViewModel for iOS [译] 如果你已经开发一段时间的iOS应用,你一定听说过Model-View-Controller, 即MVC.MVC是构建iOS a ...

  7. angular服务一

    angular服务 [$apply()] jquery内数据绑定 要用$apply(),不然不能在js内通过angular绑定数据 <!DOCTYPE html> <html lan ...

  8. js比较版本号

    比较版本v2.2.3和2.1.15大小 //假定字符串的每节数都在5位以下 function toNum(a){ var a=a.toString(); //也可以这样写 var c=a.split( ...

  9. excellent cushioning and also vitality go back with this boot

    The particular manufactured fine mesh higher almost addresses the complete boot. Here is the sort of ...

  10. Linux 安装与配置 mysql 环境

    Centos系统,可以提前将这些工具包安装上: # yum -y install gcc libxml2-dev curl screen \libpng12-dev autoconf libpcre3 ...