react案例1：todoList

案例效果： 

一、App组件和header输入框的交互：

需求：header输入框中输入活动项，回车之后添加在app组件的state状态中

实现：1、通过在App父组件中添加一个事件，子组件中可以通过this.props.a的方法触发；

        2、子组件中调用方法并通过参数传递需要增加的数据

 (1).App组件

import React, { Component } from 'react'
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import './App.css';

class App extends Component {
  state={todos:[
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:true},
    {id:'003',name:'打代码',done:false},
  ]}
   a=(info)=>{
     const{todos}=this.state
     const newTodos=[info,...todos]
     console.log('this',this)
    //  修改状态
     this.setState({todos:newTodos})
  }
 render(){
    return (
        <div className="App">
          <div className="todo-container">
            <div className="todo-wrap">
             <Header a={this.a}/>
             <List {...this.state}/>
             <Footer/>
          </div>
         </div>
        </div>
      );
 }
}

export default App;

（2）header组件

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import './index.css'
export default class Header extends Component {
    addMessage=(event)=>{
        const {keyCode,target}=event
        if(keyCode===13){
            if(!target.value.trim()){
                alert('输入不能为空')
                return
            }
            console.log(target.value)
            const info={id:nanoid(),name:target.value,done:false}
            this.props.a(info)
        }
    }
    render() {
      return (
        <div>
           <div className="todo-header">
             <input type="text" onKeyUp={this.addMessage} placeholder="请输入你的任务名称，按回车键确认"/>
           </div>
        </div>
    )
  }
}

二、实现鼠标移入移出展示效果

import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
    state={mouse:false}
   handleMouse=(flag)=>{
     return ()=>{
        console.log(flag)
        this.setState({mouse:flag})
        console.log('mouse',this.state.mouse)
     }
  }
  render() {
    const {name,done}=this.props
    const {mouse}=this.state
    return (
      <div>
        {/* defaultChecked只管一上来是不是勾选，如果是checked则是后续不能修改 */}
       {
        <li style={{backgroundColor:mouse?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <label>
            <input type="checkbox" defaultChecked={done}/>
            <span>{name}</span>
          </label>
          <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>{'删除'}</button>
        </li>
       }
        
      </div>
    )
  }
}

三、选项框修改App中的状态（APP与item爷孙交互）

总结：状态在哪里，修改状态的方法得在哪里。

实现步骤：

1.App中在子组件实例创建的位置绑定事件，并通过方法修改状态中的数据。

2.中间的子组件List中继续传递props中传递的修改状态的方法

 3.item孙组件中触发需要修改状态的事件源，在事件中调用props中传递过来的方法（定义在爷组件中），并传递修改的标识参数方便App组件中的方法修改状态使用。

代码：

App.jsx

import React, { Component } from 'react'
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';
import './App.css';

class App extends Component {
  state={todos:[
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:true},
    {id:'003',name:'打代码',done:false},
  ]}
   a=(info)=>{
     const{todos}=this.state
     const newTodos=[info,...todos]
     console.log('this',this)
    //  修改状态
     this.setState({todos:newTodos})
  }
//   修改todos中的done
  updateTodo=(id,done)=>{
    const {todos}=this.state
    // 匹配处理数据
    const newTodos=todos.map((todoObj)=>{
        if(todoObj.id===id) return {...todoObj,done}
        else return todoObj
    })
    // 修改状态
    this.setState({todos:newTodos})
  }
 render(){
    return (
        <div className="App">
          <div className="todo-container">
            <div className="todo-wrap">
             <Header a={this.a}/>
             <List {...this.state} updateTodo={this.updateTodo}/>
             <Footer/>
          </div>
         </div>
        </div>
      );
 }
}

export default App;

 list.jsx

  render() {
    console.log('list',this.props)
    const {todos,updateTodo}=this.props
    return (
      <div>
         <ul className="todo-main">
            {todos.map((item)=>(   <Item  key={item.id} {...item} updateTodo={updateTodo} />) )}
         </ul>
      </div>
    )
  }

Item.jsx

import React, { Component } from 'react'
import './index.css'

export default class Item extends Component {
  
    state={mouse:false}
   handleMouse=(flag)=>{
     return ()=>{
        console.log(flag)
        this.setState({mouse:flag})
        console.log('mouse',this.state.mouse)
     }
  }
//  修改App组件中todos列表数据中的done
 changeHandle=(event)=>{
    const {id,updateTodo}=this.props
    console.log(event.target.checked)
    updateTodo(id,event.target.checked)
  }
  render() {
    const {name,done}=this.props
    const {mouse}=this.state
    return (
      <div>
        {/* defaultChecked只管一上来是不是勾选，如果是checked则是后续不能修改 */}
       {
        <li style={{backgroundColor:mouse?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
          <label>
            <input type="checkbox" defaultChecked={done} onChange={this.changeHandle}/>
            <span>{name}</span>
          </label>
          <button className="btn btn-danger" style={{display:mouse?'block':'none'}}>{'删除'}</button>
        </li>
       }
        
      </div>
    )
  }
}

四、对props进行类型限制 

安装库：npm i prop-types

引用：import PropTypes from "prop-types"

五、实现删除功能

1、状态所在组件中绑定删除事件，并实现删除逻辑

2、子组件或孙组件中触发事件源并调用app组件中修改状态的方法。

 

 六、实现底部全选功能和删除已完成任务

代码： 

import React, { Component } from 'react'
import Header from './components/Header';
import List from './components/List';
import Footer from './components/Footer';

import './App.css';

class App extends Component {
  state={todos:[
    {id:'001',name:'吃饭',done:true},
    {id:'002',name:'睡觉',done:true},
    {id:'003',name:'打代码',done:false},
  ]}
   a=(info)=>{
     const{todos}=this.state
     const newTodos=[info,...todos]
     console.log('this',this)
    //  修改状态
     this.setState({todos:newTodos})
  }
//   修改todos中的done
  updateTodo=(id,done)=>{
    const {todos}=this.state
    // 匹配处理数据
    const newTodos=todos.map((todoObj)=>{
        if(todoObj.id===id) return {...todoObj,done}
        else return todoObj
    })
    // 修改状态
    this.setState({todos:newTodos})
  }
 //  删除todo
  deleteTodo=(id)=>{
    const {todos}=this.state
    if(window.confirm('您确定删除吗？')){
        const newTodos=todos.filter(item=>item.id!==id)
        this.setState({todos:newTodos})
    }
   
  }
//   全选按钮
  checkAllTodo=(done)=>{
    const {todos}=this.state
    const newTodos=todos.map(todo=>{return {...todo,done}})
    this.setState({todos:newTodos})
  }
//   删除已完成任务
  deleteDone=()=>{
    const {todos}=this.state
    const newTodos=todos.filter(todo=>{
        return !todo.done
    })
    this.setState({todos:newTodos})
  }
 render(){
    return (
        <div className="App">
          <div className="todo-container">
            <div className="todo-wrap">
             <Header a={this.a}/>
             <List {...this.state} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
             <Footer {...this.state} checkAllTodo={this.checkAllTodo} deleteDone={this.deleteDone}/>
          </div>
         </div>
        </div>
      );
 }
}

export default App;

footer:

import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
    // 全选按钮
    changeAll=(event)=>{
     
      this.props.checkAllTodo(event.target.checked)
    }
    // 删除已完成
    deleteDone=()=>{
        this.props.deleteDone()
    }
  render() {
    const {todos}=this.props
    const total=todos.length
    const checkedCount=todos.reduce((pre,cur)=>{return pre+=cur.done?1:0},0)
    return (
      <div>
         <div className="todo-footer">
           <label>
            <input type="checkbox" checked={total===checkedCount&&total>0?true:false} onChange={this.changeAll}/>
          </label>
          <span>
            <span>已完成{checkedCount}</span> / 全部{total}
          </span>
         <button className="btn btn-danger" onClick={this.deleteDone}>清除已完成任务</button>
      </div>
      </div>
    )
  }
}

 

 七、总结案例：

1、拆分组件、实现静态组件，注意：className,style的写法

2、动态初始化列表，如何确定将数据放在那个组件的state中？

-----某个组件使用：放在自身的state中

-----某些组件使用：放在他们共同的父组件state中（官方称此操作为：状态提升）

3.关于父子之间通信：

   1.【父组件】给【子组件】传递数据：通过props传递

   2.【子组件】给【父组件】传递数据：通过props传递，要求父提前给子传递一个函数

4.注意defaultChecked和checked的区别,类似的还有：defaultValue和value

5.状态在哪里，操作状态的方法就在哪里