框架TodoMVC(react)

实现：

创建四个组件，分别是头组件，尾组件，list组件，item组件，存在于这个mvc中的。

在APP.js中分别引入前三个个组件（item组件是存在于list中的，所以在list中引入item组件）

在app.js中写好初始数据，在list中显示出来

 const {todos} = this.props return(<ul>{todos.map(todo=>{return <Item key={todo.id} {...todo}></Item>})}</ul>)

在app中的组件引入数据

 const {todos} = this.state<List todos={todos}   deleteTodo={this.deleteTodo}></List>

至此，实现显示初始数据。

接着实现增添数据：1.在头部判断输入的东西是否为空，用到trim(),判空，如果为空，那么弹窗警告“不允许输入空消息”，2.输入后按回车（不为空的情况下）后数据出现到list中。判断之后直接触发直击app中state数据的增添方法。

 <Header addTodo={this.addTodo}></Header>handleKeyup=(event)=>{const {keyCode,target} = event if(keyCode!==13) return if(target.value.trim() ===""){alert("输入内容不能为空")return }const todoObj = {id:nanoid(),name:target.value,done:false}this.props.addTodo(todoObj)target.value = ""}render(){return(<div>Header<input placeholder="请输入，按enter结束" onKeyUp={this.handleKeyup}/></div>)}

在头部输入后按回车后调用下面的方法：

  addTodo=(todoObj)=>{const {todos} = this.stateconst newTodos = [todoObj,...todos]this.setState({todos:newTodos})}

尾部的已完成项目与未完成项目，如果done状态时true,那就是完成的（+1），false那就未完成（+0）

 const {todos} = this.propsconst total = todos.lengthconst doneTotal = todos.reduce((acc,todo)=>acc+(todo.done ? 1:0),0)return(<div><label><input type="checkbox" onChange={this.handleCheckAll}/></label><span>已完成{doneTotal}/全部{total}</span><button onClick={this.handleClearAllDone}>清楚全部已完成项目</button></div>)

删除这条消息：
如果每次删除都要从第一个开始遍历到最后一个的话，那太浪费性能了，所以我们用filter过滤方法，只过滤掉我们点击要删除的消息。

流程:点击删除按钮，弹窗显示：确定真的删除嘛？（该判断弹窗用confirm属性）如果确定删除则过滤掉这条消息，触发在app中的直击state数据的删除方法。

 handleDelete=(id)=>{if(window.confirm("确定删除？？？")){this.props.deleteTodo(id)}}render(){const {id,name,done} = this.props return(<li><label><input type="checkbox" checked={done} onChange={this.handleCheck}/><span>{name}</span></label><button onClick={()=>this.handleDelete(id)}>删除</button></li>)

deleteTodo=(id)=>{const {todos} = this.stateconst newTodos = todos.filter(todoObj=>{return todoObj.id !== id})this.setState({todos : newTodos})}

（记得把方法在app中传入相对应的组件中）

先写到这里啦，先实现了一小部分功能，没有写样式呢，关注看后续哦，我会继续更新的~

框架TodoMVC(react)相关推荐

从0实现react框架，React Fiber架构和Fiber Diff算法
react框架是目前最为流行的前端框架之一,尤其在很多大厂,应用更为广泛.相对于一些mvvm框架,react上手需要一定的技术基础,但掌握后,编码体验和性能是很不错的.react整体思想是函数式编程, ...
vue框架和react框架的区别以及各自的应用场景
一.框架简介 React主张是函数式编程的理念, 实现了前端界面的高性能高效率开发,react很擅长处理组件化的页面.React的官方网站提到了"学习一次,随处写作"这个关键功能, ...
分享一波我常用的UI框架 VUE+React
分享一波我常用的UI框架 VUE+React(后续更新) PC web(移动端) 后端系统快速开发框架我只分享一波我常用的其他还有许多UI框架大家可以自己去看看使用 vue篇 PC elemen ...
（React 框架）React技术
1.简介 React 是Facebook 开发并开源的前端框架当时他们的团队在市面上没找到合适的MVC 框架,就自己写一个 JS 框架,用来架设 instagram(图片分享社交网路),2013年开 ...
2017年 JavaScript 框架回顾 -- React生态系统
前一篇文章中,我们介绍了2017年 JavaScript 框架的整体情况.我们也了解到在众多的前端框架中,目前最为庞大又在快速增长的当属 React 了,本文就来重点介绍 React 的生态系统. 首 ...
基于Ant Design UI框架的React项目
概述这款基于React开发的UI框架,界面非常简洁美观,在这篇文章中我主要为大家介绍一下如何用Ant开始搭建React项目详细代码下载:http://www.demodashi.com/demo ...
前端三大框架Angular React Vue
前端三大框架:Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 -- Web.移动 Web ...
关于前端框架vue/react及UI框架的配合
介绍收集收集vue/react搭配UI框架的demo, 网络请求库常用axios 移动端h5 vite + vue3 + vant3 : https://gitee.com/WeiziPlus/mu ...
移动端框架php,React移动端框架有哪些
React移动端框架有:1.Material-UI,基于React的UI界面框架:2.Semantic-UI-React:3.Ant Design Mobile:4.Onsen UI:5.NowUI等 ...

框架TodoMVC(react)

框架TodoMVC(react)相关推荐

最新文章

热门文章