//输入imrc 直接按enter 这是快捷键
import React, { Component,createRef } from 'react';
//输入ccc 直接按enter 这是快捷键
class App extends Component {
constructor(props) {
super(props);
this.state = {
list:[
{title:"学习Vue",done:true,state:1},
{title:"学会打王者",done:false,state:1}
]
}
this.myref = createRef();
}
//添加列表
addList = ()=>{
//获取现有状态list
var list = this.state.list;
//添加一项, 内容为input 表单的值
list.unshift({title:this.myref.current.value,done:false,state:1})
//更新state
this.setState({list})
//清空文本框
this.myref.current.value = "";
}
//删除列表
delList = (item)=>{
//获取现有的状态list
var list = this.state.list;
//根据item的title查出在list列表是第几个
var ind = list.findIndex(value=>value.title===item.title);
//删除1个
list.splice(ind,1);
//更新state的list值同时自动更新视图
this.setState({list})
}
updateList = (item)=>{
//获取现有的状态list
var list = this.state.list;
//根据item的title查出在list列表是第几个
var ind = list.findIndex(value=>value.title===item.title);
//把done取反
list[ind].done = !list[ind].done
//更新state的list值同时自动更新视图
this.setState({list})
}
render() {
//filter遍历并过滤数组, 当回调函数返回真保留
var doneList = this.state.list.filter(item=>item.done)
var undoneList = this.state.list.filter(item=>!item.done)
return (
<div>
<h1>美妙清单</h1>
<input ref={this.myref} /> <button onClick={this.addList}>添加</button>
<h3>未完成({undoneList.length})</h3>
<div>
{undoneList.map((item,index)=>
<div key={index}>
<input checked={item.done} onChange={()=>{this.updateList(item)}} type="checkbox" />
<span>
<span>{item.title}</span>
</span>
<button onClick={()=>this.delList(item)}>x</button>
</div>)}
</div>
<h3>已完成({doneList.length})</h3>
<div>
{/*对已完成列表进行遍历,映射为一个div */}
{/* 这里的item 指的是:{title:"学习Vue",done:true,state:1} */}
{doneList.map((item,index)=>
<div key={index}>
{/*包含一个多选框, checked值和遍历元素item的done值保持一致 */}
<input checked={item.done} onChange={()=>{this.updateList(item)}} type="checkbox" />
<span>
{/*渲染标题 */}
<span>{item.title}</span>
</span>
{/*添加删除按钮 */}
<button onClick={()=>this.delList(item)}>x</button>
</div>)}
</div>
</div>
);
}
}
export default App;
react的todolist 基本功能
最新推荐文章于 2024-09-30 18:55:14 发布