框架结构和砖混结构的区别_react框架官网

框架结构和砖混结构的区别_react框架官网实现:创建四个组件,分别是头组件,尾组件,list组件,item组件,存在于这个mvc中的。在APP.js中分别引入前三个个组件(item组件是存在于list中的,所以在list中引入item组件)在app.js中写好初始数据,在list中显示出来const{todos}=this.propsreturn(<ul>{todos.map(todo=>{return<Itemkey={

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

实现:

创建四个组件,分别是头组件,尾组件,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.state
    const newTodos = [todoObj,...todos]
    this.setState({todos:newTodos})
   }

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

 const {todos} = this.props
   const total = todos.length
   const 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.state
    const newTodos = todos.filter(todoObj=>{
      return todoObj.id !== id
    })
    this.setState({
      todos : newTodos
    })
  }

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

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

 

 

 

 

 

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194732.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • restlet入门搭建hello world[通俗易懂]

    restlet入门搭建hello world[通俗易懂]最近研究rest接口,发现restlet应用挺广泛,不过入门资料很少,去官网下载jar包,根据官网说明搭建了一个简单的restlet工程:1、首先导入jar包org.restlet.jarorg

  • 品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」

    品优购-day03笔记-完善品优购的首页&制作列表页「建议收藏」typora-copy-images-to:media第01阶段.WEB基础:品优购-day03笔记-完善品优购的首页&制作列表页学习目标完善品优购项目的首页index.html制作品优购项目的列表页list.html品优购项目(三)第01阶段.WEB基础:品优购-day02笔记-品优购首页1.品优购首页布局命名集合:名称说明…

  • linux 删除ip地址_linux 固定ip

    linux 删除ip地址_linux 固定ip欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗Ctrl+B斜体Ctrl+I引用Ctrl

    2022年10月20日
  • linux中mysql忘记密码[通俗易懂]

    linux中mysql忘记密码[通俗易懂]第一种解决方案解决方法:1、利用“servicemysqlstop”命令关闭mysql服务;2、修改mysql的配置文件“my.conf”;3、用“servicemysqldstart”命令重启数据库;4、用“usemysql”语句修改密码。本教程操作环境:linux7.3系统、mysql8.0.22版本、DellG3电脑。linux中mysql忘记密码怎么解决解决方法:1、检查mysql服务是否启动,如果启动,关闭mysql服务 .

  • zabbix邮箱告警的详细配置

    zabbix邮箱告警的详细配置

  • 更新日志.txt

    【20210811.1905.3】增加了几处新功能:1.单码登录功能2.账号与用户电脑机械码绑定<url>https://zhuanlan.zhihu.com/p/350520546</url>【20210811.1905.2】优化了几个子程序算法,提高运行速度【20210811.1905.1】1.更新了xxx内容2.修复了几处小bug….

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号