完整代码
import React, {Component} from 'react';
import '../assets/css/index.css';
class Todolist extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{
title: '录制ionic',
checked: true
},
{
title: '录制nodejs',
checked: false
}
,
{
title: '录制egg.js',
checked: true
},
{
title: '录制vue',
checked: false
}
]
};
}
addData = (e) => {
//按下回车的时候在增加
if (e.keyCode == 13) {
// alert(title);
let title = this.refs.title.value;
let tempList = this.state.list;
tempList.push({
title: title,
checked: false
})
//改变后的值赋值给list
this.setState({
list: tempList
})
//表单置为空
this.refs.title.value = '';
}
}
checkboxChage = (key) => {
// alert('111');
let tempList = this.state.list;
tempList[key].checked = !tempList[key].checked;
this.setState({
list: tempList
})
}
removeData = (key) => {
let tempList = this.state.list;
tempList.splice(key, 1);
this.setState({
list: tempList
})
}
render() {
return (
<div>
<header className="title">TodoList: <input ref="title" onKeyUp={this.addData}/></header>
<h2>待办事项</h2>
<hr/>
<ul>
{
this.state.list.map((value, key) => {
if (!value.checked) {
return (
<li>
<input type="checkbox" checked={value.checked}
onChange={this.checkboxChage.bind(this, key)}/>
{value.title}
-- <button onClick={this.removeData.bind(this, key)}>删除</button>
</li>
)
}
})
}
</ul>
<h2>已完成事项</h2>
<hr/>
<ul>
{
this.state.list.map((value, key) => {
if (value.checked) {
return (
<li>
<input type="checkbox" checked={value.checked}
onChange={this.checkboxChage.bind(this, key)}/>
{value.title}
-- <button onClick={this.removeData.bind(this, key)}>删除</button>
</li>
)
}
})
}
</ul>
</div>
);
}
}
export default Todolist;
