todoList案例（react版本）之勾选/去勾选todo

代码更改涉及的文件有，

1. App.js，即App组件。
2. List/index.jsx，即List组件。
3. 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