代码
- 学习资源推荐:https://blog.csdn.net/qq_42813491/article/details/90213353
import React, { Component } from 'react'
class App extends Component {
constructor(props) {
super(props);
this.state = {
list: [
{ title: "任务一", checked: false },
{ title: "任务二", checked: true },
{ title: "任务三", checked: false },
{ title: "任务四", checked: true },
{ title: "任务五", checked: false },
{ title: "任务六", checked: true }
]
}
}
add = (e) => {
if (e.keyCode === 13) {
let title = this.refs.title.value;
let checked = false;
let obj = { title, checked };
let tempList = this.state.list;
tempList.push(obj);
this.setState({
list: tempList
})
this.refs.title.value = "";
}
}
remove = (index) => {
let tempList = this.state.list;
tempList.splice(index,1);
this.setState({
list: tempList
})
}
checkboxChange = (key, checked) => {
let list = this.state.list;
list[key].checked = !checked;
this.setState({
list: list
})
}
render() {
return (
<div>
<p>react实现todoList</p>
添加:<input ref="title" type="text" onKeyUp={this.add} />
<hr/>
<p>未做</p>
<ul>{
this.state.list.map((item,key)=>{
if(!item.checked){
return ( <li key={key}> <input type="checkbox" checked={item.checked} onChange={this.checkboxChange.bind(this,key,item.checked)} />{item.title}</li>)
}
return null;
})
}
</ul>
<p>已做</p>
<ul>{
this.state.list.map((item,key)=>{
if(item.checked){
return ( <li key={key}> <input type="checkbox" checked={item.checked} onChange={this.checkboxChange.bind(this,key,item.checked)} />{item.title}<span onClick={this.remove.bind(this,key)}>----删除</span></li>)
}
return null;
})
}
</ul>
</div>
)
}
}
export default App;