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

全栈程序员站长

发布于 2022-10-01 15:23:02

3720

发布于 2022-10-01 15:23:02

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

实现：

创建四个组件，分别是头组件，尾组件，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中传入相对应的组件中）

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/194732.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022年9月12日，如有侵权请联系 cloudcommunity@tencent.com 删除

java