ToDoList,用react写的一个简单版,总共分为四个组件,希望对大家有用
目录
效果图:
1.app.js页
import React from "react";
// import Welcome from './component/Welcome'
// import Hello from './component/Hello'
import Header from './todolist/Header'
import List from './todolist/list'
import Foot from './todolist/Foot'
import './index.css'
import axios from "axios";
class app extends React.Component {
state={
todolist:[]
}
componentDidMount(){
axios.get("/students").then(
response=>console.log(response),
err=>console.log(err)
)
}
add=(todoobj)=>{
console.log(todoobj,'dfuhsdfnks')
let newtodolist = [todoobj,...this.state.todolist]
this.setState({
todolist:newtodolist
})
console.log(this.state.todolist)
}
render(){
let {todolist} = this.state
return (
<div id="root">
<div className="todo-container">
<Header addobj={this.add}></Header>
<List todolist={todolist}></List>
<Foot></Foot>
</div>
</div>
)
}
}
export default app;
2.header组件
import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import "./index.css"
import List from '../list'
import Foot from '../Foot'
export default class Header extends Component {
state = {
datalist: [],
flag: false
}
add = (e) => {
let val = e.target.value
if (e.keyCode === 13 && val.trim()) {
let newlist = [...this.state.datalist, {
// id: Math.random() * 10000,
id:nanoid(),
title: val,
done: false
}]
this.setState({
datalist: newlist,
})
e.target.value = ''
}
}
del(id) {
this.setState({ datalist: this.state.datalist.filter(item => item.id !== id) })
}
changee(e, id) {
this.setState({ datalist: this.state.datalist.map(item => item.id === id ? { ...item, done: e.target.checked } : item) })
}
delall() {
this.setState({ datalist: this.state.datalist.filter(item => !item.done) })
}
allchange(e) {
this.setState({
flag: !this.state.flag,
datalist: this.state.datalist.map(item => ({ ...item, done: !this.state.flag }))
})
}
render() {
let { datalist } = this.state;
return (
<div id="root">
<div className="todo-container">
<div className="todo-wrap">
<div className="todo-header">
<input type="text" placeholder="请输入你的任务名称,按回车键确认" onKeyDown={this.add} />
</div>
<List datalist={datalist} del={this.del.bind(this)}
changee={this.changee.bind(this)}
></List>
<Foot allObject={
(() => {
// 假设
let num = 0;
// 假设全部选中,
// 他的值是根据datalist的长度 长度大于0则为true,等于0则为false,等于true时就是全部选中,
this.state.flag = datalist.length ? true : false
for (const iterator of datalist) {
if (iterator.done) num += 1
// 循环时有一个不为true,则直接修改控制全选的值
if (!iterator.done) this.state.flag = false
}
return {
num,
flag: this.state.flag,
total: datalist.length
}
})() // 自调用函数
} delall={this.delall.bind(this)} allchange={this.allchange.bind(this)}></Foot>
</div>
</div>
</div>
)
}
}
3.list组件
import React, { Component } from 'react'
import "./index.css"
import Item from "../item"
export default class List extends Component {
constructor(props){
super(props);
}
render() {
let {datalist,del,changee}=this.props;
return (
<div>
<Item datalist={datalist} del={del.bind(this)} changee={changee.bind(this)}></Item>
</div>
)
}
}
4.item组件
import React, { Component } from 'react'
import "./index.css"
export default class Item extends Component {
constructor(props){
super(props);
}
render() {
let {datalist,del,changee} = this.props
// console.log('this.state.datalist :>> ', this.state.datalist);
return (
<ul className="todo-main">
{datalist.map((item,index)=>{
return ( <li key={index}>
<label>
<input type="checkbox" onChange={(e)=>{changee(e,item.id)}} checked={item.done}/>
<span>{item.title}</span>
</label>
<button className="btn btn-danger" onClick={()=>{del(item.id)}} style={{display:'none'}}>删除</button>
</li>)
})}
</ul>
)
}
}
5.foot组件
import React, { Component } from 'react'
import "./index.css"
export default class Foot extends Component {
constructor(props) {
super(props)
}
render() {
let { delall, allchange, allObject: {
num,
flag,
total
} } = this.props
return (
<div className="todo-footer">
<label>
<input type="checkbox" checked={flag} onChange={(e) => { allchange(e) }} />
</label>
<span>
<span>已完成{num}</span> / 全部{total}
</span>
<button className="btn btn-danger" onClick={() => { delall() }}>清除已完成任务</button>
</div>
)
}
}