react学习之 todolist制作， es6最新写法

文件结构在todolist文件夹内，划分为三个组件。主组件为todoIndex.js;另外两个为子组件；（react初始化的脚手架为create-react-app，在此基础上进行开发的）


主组件代码如下：

import React, {Component} from 'react';
import ListItem from "./listItem";
import Dialog from "./dialog";

const container = {
margin: "20px auto",
width: "80%",
paddingBottom: "20px",
height: "auto",
backgroundColor: "#d4d4d4"
};
const title = {
textAlign: "center",
color: "#000",
fontSize: "30px"
};
const list = {
width: "100%",
fontSize: "20px",
color: "#f1f1f1",
textAlign: "left",
margin:"0",
padding:"10px 30px"
};
const totalNumber = {
listStyle:"none",
textAlign:"left",
padding:"0 20px",
width:"60%",
color:"#ff8302",
display:"flex",
justifyContent:"space-between"
};

export default class ToDoList extends Component {
constructor(props) {
super(props);
//初始任务状态
this.state = {
list: [{
id: 0,
name: "吃饭",
status: 0
}, {
id: 1,
name: "睡觉",
status: 0
}, {
id: 2,
name: "打豆豆",
status: 0
}],
finished: 0
};
}

//将新任务添加到数组
addTask(newItem) {
let allTask = this.state.list;
allTask.push(newItem);
this.setState({
list: allTask
})
}

//更新已完成任务数量
updateFinished(todoItem) {
let sum = 0;
this.state.list.forEach((item) => {
if (item.id === todoItem.id) {
item.status = todoItem.status
}
if (item.status === 1) {
sum++
}
});
this.setState({
finished: sum
})
}

//更新所有任务列表总数
updateTotal(todoItem) {
let obj = [], sum = 0;
this.state.list.forEach((item) => {
if (item.id !== todoItem.id) {
obj.push(item);
if (item.status === 1) {
sum++
}
}
});
this.setState({
list: obj,
finished: sum
})
}

render() {
return (
<div style={container}>
<h1 style={title}>To Do List</h1>
<ul style={list}>
{this.state.list.map((item, index) =>
<ListItem
item={item}
finishedChange={this.updateFinished.bind(this)}
totalChange={this.updateTotal.bind(this)}
key={index}
/>
)}
<li style={totalNumber}>
<span>
已完成：{this.state.finished}
</span>
<span>
总计：{this.state.list.length}
</span>
</li>
</ul>
<Dialog addNewTask={this.addTask.bind(this)} nums={this.state.list.length}/>
</div>
)
}
}

子组件（list列表项和删除按钮）代码如下：

import React, {Component} from 'react';

const deleteButton = {
cursor:"pointer",
color:"#f6f6f6",
fontSize:"16px"
};

export default class ListItem extends Component {
constructor(props) {
super(props);
this.handleFinished = this.handleFinished.bind(this);
this.handleDelete = this.handleDelete.bind(this)
}

handleFinished() {
let status = this.props.item.status;
status = (status === 0 ? 0 : 1);
let obj = {
id: this.props.item.id,
name: this.props.item.name,
status: status
};
this.props.finishedChange(obj)
}

handleDelete() {
this.props.totalChange(this.props.item)
}

render() {
const item = this.props.item;
const unFinish = {
width:"70%",
color: "#1b00ea",
listStyle:"none",
display:"flex",
justifyContent:"space-around"
};
const finish = {
width:"70%",
color: "#090563",
listStyle:"none",
textDecoration: "line-through",
display:"flex",
justifyContent:"space-around",
};
let itemStyle = item.status === 0 ? unFinish : finish;

return (
<li key={item.id} style={itemStyle}>
<span onChange={this.handleFinished}
id={item.id}>
{item.id}
</span>
<span style={{color: item.status === 0 ? "#1804ff" : "red"}}>
{item.name}
</span>
<span onClick={this.handleDelete} style={deleteButton}>
Delete
</span>
</li>
)
}
}

子组件（输入框和保存按钮）代码如下：

import React, {Component} from 'react';

const taskStyle = {
textAlign:"center",
fontSize:"24px",
};
const ipt = {
width:"50%",
height:"30px",
textIndent:"10px"
};
const btn = {
width:"100px",
height:"30px"
};

export default class Dialog extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this)
}

handleClick() {
let len = this.props.nums;
let newId = len > 0 ? len : 0;
let value = this.refs.myText.value;
if (value !== "") {
let obj = {
id: newId,
name: value,
status: Math.floor(Math.random()*2)
};
this.refs.myText.value = "";
this.props.addNewTask(obj)
}
}

render() {
return (
<div style={taskStyle}>
<div>
<h5>Add Your Task</h5>
<input type="text" ref="myText" placeholder="i want to do ..." style={ipt}/>
</div>
<div>
<input type="button" value="Save Task" onClick={this.handleClick} style={btn} />
</div>
</div>
)
}
}

最终实现的效果如下：



不足之处：输入任务保存时，我做的是随机生成0或者1，分别代表已完成和未完成的任务，在任务总计时数量是对的，已完成在点击保存按钮时并没有及时更新数量，删除一项任务时，已完成任务数量就会统计出来。这点小bug，后续再研究。。。