App.js
import React, { Component } from "react";
import './App.css'
export default class App extends Component {
state = {
// 将数据保存到浏览器中
data: JSON.parse(window.localStorage.getItem('todo')) || [],
// 控制显示与隐藏
active: 0,
value: ""
}
// 获取到input框中的值
insert(ev) {
this.setState({
value: ev.target.value
})
}
// 控制筛选按钮
isHaschk() {
let len = this.state.data.filter(item => item.ischk === true).length
if (len > 0 && len < this.state.data.length) {
return true
} else if (len === this.state.data.length) {
return false
} else {
return false
}
}
// 控制清空完成按钮
isCanClo() {
let len = this.state.data.filter(item => item.ischk === true).length
if (len > 0 && len < this.state.data.length) {
return true
} else if (len === this.state.data.length) {
return true
} else {
return false
}
}
// 添加
// 保存到浏览器里面
add() {
let info = { id: new Date().getTime(), data: this.state.value, ischk: false }
console.log(info);
this.setState({
data: [info, ...this.state.data]
}, () => {
window.localStorage.setItem('todo', JSON.stringify(this.state.data))
})
this.setState({
value: ""
})
}
// 更改按钮状态事件
changeChk(id) {
let info = this.state.data.map(item => {
if (item.id === id) {
item.ischk = !item.ischk
}
return item
})
this.setState({
data: info
}, () => {
window.localStorage.setItem('todo', JSON.stringify(this.state.data))
})
}
// 删除
del(id) {
let info = this.state.data.filter(item => item.id !== id)
this.setState({
data: info
}, () => {
window.localStorage.setItem('todo', JSON.stringify(this.state.data))
})
}
// 删除全部
delEnd() {
let info = this.state.data.filter(item => item.ischk === false)
this.setState({
data: info,
active: 1
}, () => {
window.localStorage.setItem('todo', JSON.stringify(this.state.data))
})
}
render() {
let { value, data, active } = this.state
let nodo = data.filter(item => item.ischk === false).length
return (
<div className="app">
< div className="box" >
<img src="user1.png" alt="" />
<h4>~Today I need to ~</h4>
<input type="text" className="addInp" value={value} onChange={(ev) => this.insert(ev)} placeholder="Add new todo..." />
<button className="sub" onClick={() => this.add()}>Submit</button>
<ul>
{
data.map(item => {
if (active === 0) {
return <li key={item.id} className={item.ischk === true ? 'chk' : ''}>
<input type="checkbox" onChange={() => {
this.changeChk(item.id)
}} checked={item.ischk} />
<span>{item.data}</span>
<p className="clo" onClick={() => this.del(item.id)}>X</p>
</li>
} else if (active === 1 && item.ischk === false) {
return <li key={item.id}>
<input type="checkbox" onChange={() => {
this.changeChk(item.id)
}} checked={item.ischk} />
<span>{item.data}</span>
<p className="clo" onClick={() => this.del(item.id)}>X</p>
</li>
} else if (active === 2 && item.ischk === true) {
return <li key={item.id} className='chk'>
<input type="checkbox" checked onChange={() => {
this.changeChk(item.id)
}} />
<span>{item.data}</span>
<p className="clo" onClick={() => this.del(item.id)}>X</p>
</li>
}
return false
})}
</ul>
<footer style={{ display: data.length === 0 ? '' : 'none' }}>
<span className="null">Congrat,you have no more tasks to do</span>
</footer>
<footer className="notnull" style={{ display: data.length > 0 ? '' : 'none' }}>
<span className="notnullFount">{nodo}item left</span>
<button onClick={() => {
this.setState({
active: 0
})
}} className={active === 0 ? 'all' : ''}>All</button>
<button onClick={() => {
this.setState({
active: 1
})
}} className={active === 1 ? 'all' : ''} style={{ display: this.isHaschk() ? '' : 'none' }}>Active</button>
<button onClick={() => {
this.setState({
active: 2
})
}} className={active === 2 ? 'all' : ''} style={{ display: this.isHaschk() ? '' : 'none' }}>Completed</button>
<button onClick={() => this.delEnd()} style={{ display: this.isCanClo() ? '' : 'none' }}>Clear completed</button>
</footer>
</div >
</div>
);
}
}
APP.css
*{
margin: 0;
padding: 0;
}
body {
width: 100%;
height: 100px;
background: linear-gradient(to right, rgb(255, 179, 0), pink);
}
.app{
width: 100%;
height: 100%;
}
.box {
width: 50%;
min-height: 350px;
background-color: #f2f2f2;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 25px;
text-align: center;
}
.box img {
margin-top: 30px;
}
.box input{
width: 300px;
height: 40px;
border: 0;
border-bottom: 2px dotted #ea7a56;
}
.sub {
border: 2px solid black;
padding: 5px 10px;
border-radius: 6px;
background-color: #fff;
margin-left: 15px;
}
ul{
list-style: none;
text-align: left;
padding-left: 60px;
width: 80%;
margin-top: 40px;
}
.clo{
display: inline-block;
font-weight: 600;
}
li{
display: flex;
align-items: center;
height: 35px;
margin-top: 15px;
}
.chk{
background-color: #fe7345;
color: white;
border-radius: 5px;
}
.chk span{
text-decoration: line-through;
}
li:last-child{
margin-bottom: 100px;
}
li input[type='checkbox']{
width: 5%;
}
li span{
width: 80%;
}
.notnull{
text-align: left;
padding: 0px 40px 30px;
display: flex;
justify-content: space-between;
}
.null{
color: #b4b9c1;
letter-spacing: 0px;
margin-bottom: 10px;
}
.notnullFount{
color: #827870;
letter-spacing: 0px;
}
.all{
background-color: #fe7444;
border: 0;
border-radius: 5px;
color: white;
padding: 3px 8px;
}
footer button{
border: none;
}
footer button:hover{
background-color: #fe7444;
color: white;
border-radius: 5px;
}