Todolist.js:
import React, { Component } from 'react';
import '../assets/css/index.css'
class Todolist extends React.Component {
constructor(props) {
super(props);
this.state = {
username:"111",
list:[
{
title:"录制ionic",
checked:true
},
{
title:"录制nodejs",
checked:false
},
{
title:"录制vue",
checked:false
},
{
title:"录制angularjs",
checked:false
},
]
};
}
removeData=(key)=>{
// alert(key)
var templateList=this.state.list;
templateList.splice(key,1)
this.setState({
list:templateList
})
}
addData=(e)=>{
//按下回车的时候下方添加事件
if(e.keyCode==13){
// alert(title)
let title=this.refs.title.value
let templateList=this.state.list;
templateList.push({
title:title,
checked:false
})
//改变后的值赋值给list
this.setState({
list:templateList
})
this.refs.title.value="" //表单置为空
}
}
checkboxChange=(key)=>{
let templateList =this.state.list;
templateList[key].checked=!templateList[key].checked
this.setState({
list:templateList
})
}
render() {
return (
<div>
{/* <h2>双休数据绑定</h2> */}
{/* model改变影响View view改变反过来影响model */}
{/* <input value={this.state.username} onChange={this.inputChange} />
<br />
<p>{this.state.username}</p>
<button onClick={this.setUsername}>改变username的值</button> */}
{/*
<h2>React Todolist案例演示</h2>
<input ref="title" /><button onClick={this.addData}>增加</button>
<hr />
<ul className="list">
{
this.state.list.map((value,key)=>{
return(
<li key={key}>
{value} --- <button onClick={this.removeData.bind(this,key)}>删除</button>
</li>
)
})
}
</ul> */}
<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.checkboxChange.bind(this,key)} />
{value.title+" "}
<button onClick={this.removeData.bind(this,key)}>删除</button>
</li>
)
}
})
}
</ul>
<h2>已完成事项</h2>
<hr></hr>
<ul>
{
this.state.list.map((value,key)=>{
if(value.checked){
return(
<li>
<input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key,value.checked)} />
{value.title+" "}
<button onClick={this.removeData.bind(this,key)}>删除</button>
</li>
)
}
})
}
</ul>
</div>
);
}
}
export default Todolist;
注意事项的状态,在先完成列表的增删功能后再考虑状态的转换。