代码更改涉及的文件有,
- App.js,即App组件。
- List/index.jsx,即List组件。
- Item/index.jsx,即Item组件。
App.js(App组件)
import React, { Component } from 'react';
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
import "./App.css";
export default class App extends Component {
state = {
todos:[
{id:"001",title:"吃饭",done:true},
{id:"002",title:"睡觉",done:true},
{id:"003",title:"打豆豆",done:false}
]
}
addTodo = (todoObj) => {
const {todos} = this.state;
const newTodos = [todoObj,...todos];
this.setState({
todos:newTodos
})
}
checkTodo = (id,done) => {
const {todos} = this.state;
const newTodos = todos.map(todoObj => {
if(todoObj.id === id) return {...todoObj,done:done}
else return todoObj;
})
this.setState({
todos:newTodos
})
}
render() {
const {todos} = this.state;
const {addTodo,checkTodo} = this;
return (
<div className="todo-container">
<div className="todo-wrap">
<Header addTodo={addTodo}/>
<List todos={todos} checkTodo={checkTodo}/>
<Footer/>
</div>
</div>
)
}
}
List/index.jsx(List组件)
import React, { Component } from 'react';
import Item from "../Item";
import "./index.css";
export default class List extends Component {
render() {
const {todos,checkTodo} = this.props;
return (
<ul className="todo-main">
{
todos.map(todo => <Item key={todo.id} {...todo} checkTodo={checkTodo}/>)
}
</ul>
)
}
}
Item/index.jsx(Item组件)
import React, { Component } from 'react'
import "./index.css";
export default class Item extends Component {
handleChange = (id) => {
return (event) => {
this.props.checkTodo(id,event.target.checked);
}
}
render() {
const {id,title,done} = this.props;
const {handleChange} = this;
return (
<li>
<label>
<input type="checkbox" defaultChecked={done} onChange={handleChange(id)}/>
<span>{title}</span>
</label>
<button className="btn btn-danger" style={{display:'none'}}>删除</button>
</li>
)
}
}
相关链接
todoList案例(react版本)之搭建静态页面
todoList案例(react版本)之初始化列表
todoList案例(react版本)之添加todo