大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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中传入相对应的组件中）
先写到这里啦，先实现了一小部分功能，没有写样式呢，关注看后续哦，我会继续更新的~
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/194732.html原文链接：https://javaforall.net
