footer.index.js
import React, { Component } from 'react'
import './index.css'
export default class index extends Component {
// 全选/全不选
handleChange = (event) => {
this.props.allChecked(event.target.checked)
}
handleClick = () => {
this.props.clearAllDone()
}
render() {
const {todoList} = this.props;
const doneCount = todoList.reduce((pre,todo)=> pre + (todo.done ? 1 : 0),0);
const allCount = todoList.length;
return (
<div className="todo-footer">
<label>
<input type="checkbox" onChange={this.handleChange} checked={ doneCount === allCount && allCount !== 0 ? true : false }/>
</label>
<span>
<span>已完成 {doneCount}</span> / 全部 {allCount}
</span>
<button className="btn btn-danger" onClick={this.handleClick}>清除已完成任务</button>
</div>
)
}
}
footer.index.css
.todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
.todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
.todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}
.todo-footer button {
float: right;
margin-top: 5px;
}
2.js
import React, { Component } from 'react'
import { nanoid } from 'nanoid'
import './index.css'
export default class index extends Component {
// 处理input enter事件
handleKeyUp = (event) => {
if(event.keyCode !== 13) return
if(event.target.value.trim() === ''){
alert("请输入值")
return
}
const todoObj = {
id:nanoid(),
name:event.target.value,
done:false
}
this.props.addTodo(todoObj);
event.target.value = "";
}
render() {
return (
<div className="todo-header">
<input type="text" placeholder="请输入你的任务名称,按回车键确认" onKeyUp={this.handleKeyUp}/>
</div>
)
}
}
2.css
.todo-header input {
width: 560px;
height: 28px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 4px 7px;
}
.todo-header input:focus {
outline: none;
border-color: rgba(82, 168, 236, 0.8);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}
3.js
import React, { Component } from 'react'
import './index.css'
export default class index extends Component {
// 处理鼠标的移入移出事件
state = {
mouse:false
}
handleMouse = (mouse) => {
return ()=>{
this.setState({
mouse:mouse
})
}
}
// 更新todo状态
handleChecked = (id) => {
return (event) => {
this.props.updataTodo(id,event.target.checked);
}
}
handleDel = (id) => {
return () => {
this.props.delTodo(id);
}
}
render() {
const {name,id,done} = this.props
const {mouse} = this.state
return (
<li onMouseLeave={this.handleMouse(false)} onMouseEnter={this.handleMouse(true)} style={{ background : mouse ? '#ddd' : 'white'}}>
<label>
<input type="checkbox" checked={done} onChange={this.handleChecked(id)}/>
<span>{name}</span>
</label>
<button className="btn btn-danger" style={{display: mouse ? 'block' : 'none'}} onClick={this.handleDel(id)}>删除</button>
</li>
)
}
}
3.css
li {
list-style: none;
height: 36px;
line-height: 36px;
padding: 0 5px;
border-bottom: 1px solid #ddd;
}
li label {
float: left;
cursor: pointer;
}
li label li input {
vertical-align: middle;
margin-right: 6px;
position: relative;
top: -1px;
}
li button {
float: right;
display: none;
margin-top: 3px;
}
li:before {
content: initial;
}
li:last-child {
border-bottom: none;
}
4.js
import React, { Component } from 'react'
import Item from '../Item'
import './index.css'
export default class index extends Component {
render() {
const { todoList,updataTodo,delTodo } = this.props
return (
<ul className="todo-main">
{
todoList.map( (todo) => {
return <Item {...todo} key={todo.id} updataTodo={updataTodo} delTodo={delTodo}/>
})
}
</ul>
)
}
}
4.css
.todo-main {
margin-left: 0px;
border: 1px solid #ddd;
border-radius: 2px;
padding: 0px;
}
.todo-empty {
height: 40px;
line-height: 40px;
border: 1px solid #ddd;
border-radius: 2px;
padding-left: 5px;
margin-top: 10px;
}
app.js
import React, {Component} from 'react';
import Footer from './components/sy5/Footer'
import Header from './components/sy5/Header'
import List from './components/sy5/List'
export default class App extends Component {
state = {
todoList:[
{id:1,name:"吃饭",done:true},
{id:2,name:"睡觉",done:true},
{id:3,name:"豪豪豪",done:false},
{id:4,name:"学React",done:false},
]
}
addTodo = (todoObj) => {
const {todoList} = this.state;
const newTodoList = [todoObj,...todoList]
this.setState({
todoList:newTodoList
})
}
// 更新todo
updataTodo = (id,done) => {
const { todoList } = this.state;
const newTodos = todoList.map((item) => {
if (item.id === id) {
return { ...item, done: done }
} else {
return item
}
})
this.setState({ todoList: newTodos })
}
// 删除
delTodo = (id) => {
const { todoList } = this.state;
const newTodos = todoList.filter( (item) => {
return item.id !== id
})
this.setState({ todoList: newTodos })
}
// 全选/全不选
allChecked = (done) => {
const { todoList } = this.state;
const newTodos = todoList.map((item) => {
return { ...item, done: done }
})
this.setState({ todoList : newTodos })
}
// 清除所以已经完成的任务
clearAllDone = () => {
const { todoList } = this.state;
const newTodos = todoList.filter((item) => {
return !item.done
})
this.setState({ todoList : newTodos })
}
render() {
const { todoList } = this.state
return (
<div className="todo-container">
<div className="todo-wrap">
<h2>todoList案例</h2>
<Header addTodo={this.addTodo}/>
<List todoList={todoList} updataTodo={this.updataTodo} delTodo={this.delTodo}/>
<Footer todoList={todoList} allChecked={this.allChecked} clearAllDone={this.clearAllDone}/>
</div>
</div>
)
}
}
app.css
body {
background: #fff;
}
.btn {
display: inline-block;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
border-radius: 4px;
}
.btn-danger {
color: #fff;
background-color: #da4f49;
border: 1px solid #bd362f;
}
.btn-danger:hover {
color: #fff;
background-color: #bd362f;
}
.btn:focus {
outline: none;
}
.todo-container {
width: 600px;
margin: 0 auto;
}
.todo-container .todo-wrap {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// import reportWebVitals from './reportWebVitals';
import Parent from './components/parent';
import Components from './components/MouseDiv';
import Comment from './components/Comment';
import gd from './components/gd';
ReactDOM.render(<App/>,document.getElementById("root"));
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(
// <React.StrictMode>
// <App />
// </React.StrictMode>
// );
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
// reportWebVitals();