)
}
diff --git a/chenxuan1/src/pages/todo/List/index.jsx b/chenxuan1/src/pages/todo/List/index.jsx
index b300fae10..48054c0fa 100644
--- a/chenxuan1/src/pages/todo/List/index.jsx
+++ b/chenxuan1/src/pages/todo/List/index.jsx
@@ -1,9 +1,27 @@
import React from "react";
+import Item from "../Item/index"
+import PropTypes from 'prop-types'
class Footer extends React.Component {
+ static propTypes={
+ todos:PropTypes.array.isRequired,
+ deleteTodo:PropTypes.func.isRequired,
+ updateTodo:PropTypes.func.isRequired
+ }
+ static defaultProps={
+ todos:[],
+ deleteTodo:()=>{},
+ updateTodo:()=>{}
+ }
render(){
+ const {todos,deleteTodo,updateTodo}=this.props
+ console.log(todos)
return (
-
-
List
+
+ {/* {
+ todos.map((i)=>{
+ return -
+ })
+ } */}
)
}
diff --git a/chenxuan1/src/pages/todo/dist/style.css b/chenxuan1/src/pages/todo/dist/style.css
index beed7a917..912b752c9 100644
--- a/chenxuan1/src/pages/todo/dist/style.css
+++ b/chenxuan1/src/pages/todo/dist/style.css
@@ -5,25 +5,24 @@
border: 1px solid #eee;
margin: 100px auto 0;
}
-
-.todo-footer {
+.todo .todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
-.todo-footer label {
+.todo .todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
-.todo-footer label input {
+.todo .todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}
-.todo-footer button {
+.todo .todo-footer button {
float: right;
margin-top: 5px;
}
\ No newline at end of file
diff --git a/chenxuan1/src/pages/todo/header/index.jsx b/chenxuan1/src/pages/todo/header/index.jsx
index a77fb655e..0e7f5390d 100644
--- a/chenxuan1/src/pages/todo/header/index.jsx
+++ b/chenxuan1/src/pages/todo/header/index.jsx
@@ -1,9 +1,32 @@
import React from "react";
+import { Input } from 'antd';
+import {nanoid} from 'nanoid';
+import PropTypes from 'prop-types'
class Footer extends React.Component {
+ static propTypes={
+ addTodo:PropTypes.func.isRequired
+ }
+ static defaultProps={
+ addTodo:()=>{}
+ }
+ componentDidMount(){
+ // this.props.addTodo({id:nanoid(),name:"测试",done:false});
+ }
+ handleKeyUp=(e)=>{
+ const {keyCode,target} = e;
+ 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 (
-
-
header
+
+
)
}
diff --git a/chenxuan1/src/pages/todo/index.jsx b/chenxuan1/src/pages/todo/index.jsx
index 2a9b5256c..fcd27251b 100644
--- a/chenxuan1/src/pages/todo/index.jsx
+++ b/chenxuan1/src/pages/todo/index.jsx
@@ -2,17 +2,29 @@ import React from "react";
import Footer from "./Footer/index";
import Headers from "./header/index";
import List from "./List/index";
-import Item from "./Item/index";
import "./style.scss";
class App extends React.Component {
+ state = {todos:[
+ {id:'001',name:'吃饭',done:true},
+ {id:'002',name:'睡觉',done:true},
+ {id:'003',name:'打代码',done:false},
+ {id:'004',name:'逛街',done:false}
+ ]}
+ updateTodo=()=>{
+
+ }
+ deleteTodo=()=>{
+
+ }
+ addTodo=()=>{
+
+ }
render() {
return (
-
-
-
-
+
+
+
);
}
diff --git a/chenxuan1/src/pages/todo/style.css b/chenxuan1/src/pages/todo/style.css
index 50d4dcfe9..65ea32c7a 100644
--- a/chenxuan1/src/pages/todo/style.css
+++ b/chenxuan1/src/pages/todo/style.css
@@ -6,27 +6,27 @@
margin: 100px auto 0;
}
-.todo-footer {
+.todo .todo-footer {
height: 40px;
line-height: 40px;
padding-left: 6px;
margin-top: 5px;
}
-.todo-footer label {
+.todo .todo-footer label {
display: inline-block;
margin-right: 20px;
cursor: pointer;
}
-.todo-footer label input {
+.todo .todo-footer label input {
position: relative;
top: -1px;
vertical-align: middle;
margin-right: 5px;
}
-.todo-footer button {
+.todo .todo-footer button {
float: right;
margin-top: 5px;
}
diff --git a/chenxuan1/src/pages/todo/style.min.css b/chenxuan1/src/pages/todo/style.min.css
index 23fb2349a..8bb767d92 100644
--- a/chenxuan1/src/pages/todo/style.min.css
+++ b/chenxuan1/src/pages/todo/style.min.css
@@ -1 +1 @@
-.todo{box-sizing:border-box;width:660px;padding:12px;border:1px solid #eee;margin:100px auto 0}.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}
+.todo{box-sizing:border-box;width:660px;padding:12px;border:1px solid #eee;margin:100px auto 0}.todo .todo-footer{height:40px;line-height:40px;padding-left:6px;margin-top:5px}.todo .todo-footer label{display:inline-block;margin-right:20px;cursor:pointer}.todo .todo-footer label input{position:relative;top:-1px;vertical-align:middle;margin-right:5px}.todo .todo-footer button{float:right;margin-top:5px}
diff --git a/chenxuan1/src/pages/todo/style.scss b/chenxuan1/src/pages/todo/style.scss
index 1a47fa3d0..fd302b782 100644
--- a/chenxuan1/src/pages/todo/style.scss
+++ b/chenxuan1/src/pages/todo/style.scss
@@ -5,26 +5,30 @@
padding: 12px;
border: 1px solid #eee;
margin: 100px auto 0;
-}
-.todo-footer {
- height: 40px;
- line-height: 40px;
- padding-left: 6px;
- margin-top: 5px;
- label{
- display: inline-block;
- margin-right: 20px;
- cursor: pointer;
- input{
- position: relative;
- top: -1px;
- vertical-align: middle;
- margin-right: 5px;
+ .todo-header{
+
+ }
+ .todo-footer {
+ height: 40px;
+ line-height: 40px;
+ padding-left: 6px;
+ margin-top: 5px;
+ label{
+ display: inline-block;
+ margin-right: 20px;
+ cursor: pointer;
+ input{
+ position: relative;
+ top: -1px;
+ vertical-align: middle;
+ margin-right: 5px;
+ }
+ }
+ button{
+ float: right;
+ margin-top: 5px;
}
}
- button{
- float: right;
- margin-top: 5px;
- }
}
+
\ No newline at end of file