React全家桶详细讲解-图文并茂

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;

}

/header/

.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);

}

/main/

.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;

}

/item/

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;

}

/footer/

.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;

}

渲染列表

---

• 在state中初始化评论列表数据

• 使用数组的map方法遍历state中的列表数据

• 给每一个被遍历的li元素添加key属性

• 在render方法里的ul节点下嵌入表达式

render() {

const {todos,updateTodo,DeleteTodo} = this.props

return (

{

todos.map((todo)=> {

return <Item key= {todo.id} {…todo} updateTodo = {updateTodo} DeleteTodo={DeleteTodo}/>

})

}

)

}

添加任务

---

addTodo用于添加一个todo，接收的参数是todo对象,将attTodo传递给heder

import React, { Component } from ‘react’

import ‘./index.css’

export default class Header extends Component {

// react生命周期-一般用在进入页面后，数据初始化，这种情况下和vue中的created挺相似的

componentDidMount() {

this.input.focus()

}

// input输入框

handleKeyUp = (event)=> {

// 结构赋值

const {keyCode,target} = event

// 判断是否是enter按键

if(keyCode !== 13) return

// 判断是否是空对象

if (target.value.trim() === ‘’){

alert(‘输入的不能为空’)

return // 如果不return，有空对象那么提示完又继续执行了，没有达到一个拦截作用

}

// 准备一个todo对象

const todoobj = {id:new Date().getTime(),name:target.value,done:false}

// 父子组件传值

this.props.addTodo(todoobj)

// 情况输入的字符串

tar