react--todolist 实现删除和改变选中状态

todolist–删除todo和改变todo的选中状态

拿到点击删除按钮的那一个todo的主键Id，通过api里面定义的删除请求：
这里有一个特别重要的点，就是怎么样去拿到id
在父组件传递给子组件的同时会把id也传递过去，那么我们只需要在子组件通过props接收就可以了，在父组件传递过去的时候需要将信息通过{…}展开
App.js

import React, { Component } from 'react'
import TodoHeader from './components/header/toheader.jsx'
import TodoInput from './components/todoinput.jsx'
import TodoList from './components/todolist/todolist.jsx'
export default class App extends Component {
  constructor(){
    super()
    this.state = {
      title:"待办事项",
      value:'',
      btnText:'ADD',
      arr:[]
    }
  }
  // 生命周期，页面重新加载数据
  componentDidMount(){
    this.getTodos()
  }
  getTodos(){
    this.$http.getTodos().then(res=>{
      this.setState({
        arr:res.data
      })
    })
  }
  render() {
    const {title,value,btnText} = this.state
    // console.log(arr)
    return (
      <div>
        <TodoHeader title={title}></TodoHeader>
        <TodoInput value = {value} btnText = {btnText} addItem={this.addItem}></TodoInput>
        {
          this.state.arr.length === 0 ?
          <p>暂无数据</p> : 
          this.state.arr.map(todo=>{
            return <TodoList {...todo} handleDelTodo = {this.handleDelTodo} key={todo.id} hanleCompleted ={this.hanleCompleted}></TodoList>
          })
        }
      </div>
    )
  }
  /**
   * @作用: 添加TODO
   * @参数: params 要添加的数据
   * @返回值: response
   * @需要注意: 
   */
  addItem = async (result)=>{
    // console.log(res)
    let obj = {
      id : new Date().getTime(),
      title:result,
      isCompleted:false 
    }
    await this.$http.addTodo(obj)
    // 重新获取一次数据
    this.getTodos()
  }
/**
 * @作用: 删除TODO
 * @参数: id  - 必传
 * @返回值: 
 * @需要注意: 
 */  
  handleDelTodo = (id) => {
    // console.log(id)

    this.$http.delTodo(id)
    // 重新获取一次数据
    this.getTodos()
  }
  /**
   * @作用: 改变input框的选中状态
   * @参数: id ---> 必传
   * @返回值: 
   * @需要注意: 
   */
  hanleCompleted = (id)=>{
    // console.log(id)
    this.setState({
      arr:this.state.arr.map(todo=>{
        if(todo.id===id) todo.isCompleted = !todo.isCompleted
        return todo
      })
    })
  }
}

todolist.js

import React, { Component } from 'react'
import './todolist.css'
export default class todolist extends Component {
  render() {
    const {id,isCompleted,title} = this.props
    return (
      <ul className="ul">
        {
          this.props==={}?
          <p>暂无数据</p>     :          
          // this.props.arr.map(todo=>{
            <li key={id}>
              <input type="checkbox" checked={isCompleted} onChange={this.handleComplete} />----
              <span>{title}</span>---
              <span>{isCompleted?'已完成':'未完成'}</span>---
              <button  onClick = {this.delItem}> 删除</button>
            </li>
        }
      </ul>
    )
  }
  handleComplete = () =>{
    const {id,hanleCompleted} = this.props
    // console.log(id)
    hanleCompleted(id)
  } 
  delItem = () =>{
    const {id,handleDelTodo} = this.props
    handleDelTodo(id)
  }
}

在点击删除按钮和选中框的时候，由于父组件已经将arr展开传递，所以在todolist就可以通过this.props拿到相应的id和传递的函数名
只需要子组件在调用父组件传递来函数的时候将自己id反馈给父组件的函数，那么父组件函数在执行的时候就可以拿到点击按钮相应的id，然后进行业务逻辑即可。
lx-swiper-todolist