React经典案列todolist 以及组件的拆分

React todoList 没拆分时代码

import React  from 'react'

class TodoList extends React.Component{
    // 固定写法
    constructor(props){
        super(props)
        this.state={
            username:'',
            list:[
                {
                title:'录制html',
                checked:false,
            },
            {
                title:'录制css',
                checked:true,
            },
            {
                title:'录制vue',
                checked:false,
            },
            {
                title:'录制jq',
                checked:true,
            },
        
        ]
        }
    }
    // 改变选择框得值
    checkBoxChange(val,key){
        console.log(val,key)
        // 在理在tsx 中改变用bind 改变this 并且传值
        var list=this.state.list
        // 改变 数组中相应对象选择框的值
        list[key].checked=!val.checked
       // 在下面改变 state的值啦
     this.setState({
         list:list
     })

    }
    // 监控文本框的值 先把文本框的值存入state 是取文的一种方式
    handelAdd=(e)=>{
        console.log(e.target.value)
        this.setState({
            username:e.target.value
        })
    }
    // 在这里添加一条数据
    
    Add=()=>{
        var temp=this.state.list
        let title=this.state.username
        temp.push({title:title,checked:false})
        console.log(this.state.username)
        this.setState({
            temp,
            
        })
    }
    // 在这里删除一条数据 注意this
    Del(key){
        console.log(key)
        var temp=this.state.list
        temp.splice(key,1)
        this.setState({
            temp,
        })
    }
    // 在render里面渲染dom
  render(){

    return (
        <div>
        // 监控文本框的值
      <input onChange={this.handelAdd }/>
      // 绑定点击事件
      <button onClick={this.Add}>增加</button>
      <hr/>
      <h3>进行中</h3>
      <ul>
      // 在大括号里就可以写js啦 自己体会他的灵活性把
          {
              this.state.list.map((val,key)=>{
                  if(val.checked){
                      return(
                          <li key={key}>
                          // 监控选择框的值
                              <input type="checkbox" onChange={this.checkBoxChange.bind(this,val,key,)}  checked={val.checked}/>
                              {val.title}
                              <button onClick={this.Del.bind(this,key)}>删除</button>
                          </li>
                      )
                  }
              })
          }
      </ul>
      <h2>已完成</h2>
        <ul>
            {
                this.state.list.map((val,key)=>{
                    if(!val.checked){
                        return(
                            <li key={key}>
                                <input type="checkbox" onChange={this.checkBoxChange.bind(this,val,key)} checked={val.checked}/>
                                {val.title}
                                <button onClick={this.Del.bind(this,key)}>删除</button>
                            </li>
                        )
                    }
                })
            }
        </ul>
      </div>
      
    ) 
  }

}
export default  TodoList

小小TodoList 却涵盖很多知识点
1 ·定义输入框事件 取输入框事件的值
2. this指向问题
3. 更改state里面的数据用this.setState({})
4. .改变this 时的传值 问题 
5. react 渲染列的 的灵活性
6. 单选框的值的改变

以上问题在上面列子中体现的淋漓尽致 请认真阅读代码 以及注释

下面我们要对这个 todoList 组件进行拆分 建立大家阅读体会官方文档 React 哲学部分

Header 组件

import React from "react";
class Headr extends React.Component {
  constructor(props) {
    super(props);
    this.state={
        username:'',
    }
    console.log(props)
  }
  // 监控输入框的值 把输入框的值存到state
  handelInput=(e)=>{
    this.setState({
        username:e.target.value
    })
    console.log(this.props)
 }
 // 新增添加单条数据 提交数据 也就是新增数据
 // react 都是在 父组件里改变数据
 subumit=()=>{
   let text= this.state.username
   // 在这里调用啦 传进来的 添加数据函数 在父组件里更改数据
  this.props.addList(text)
  // 添加数据后给 input 值空
  this.setState({
    username:''
  })
 }

  render() {
    return (
      <div>
        <input
          onChange={this.handelInput}
          placeholder="请输入代办事项"
          value={this.state.username}
        />
        <button onClick={this.subumit}> 增加 </button> <hr />
      </div>
    );
  }
}

export default Headr

Completed 组件

import React from "react";

class Completed extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props.list.list);
  }

  onChangeChecked(val, key) {
  // 调用传过来的函数更改数据
    this.props.checkboxCheckd(val, key);
  }
  //删除
  delItem(val, key){
    console.log(val,key)
    this.props.del(val,key)
   
  }

  render() {
    return (
      <div>
        <h1>已完成</h1>
        <ul>
          {this.props.list.list.map((val, key) => {
            if (val.checked) {
              return (
                <li key={key}>
                  <input
                    type="checkbox"
                    onChange={this.onChangeChecked.bind(this, val, key)}
                    checked={val.checked}
                  />
                  {val.title}
                  <button onClick={this.delItem.bind(this, val, key)}>删除</button>
                </li>
              );
            }
          })}
        </ul>
        <h1>未完成</h1>
        <ul>
          {this.props.list.list.map((val, key) => {
            if (!val.checked) {
              return (
                <li key={key}>
                  <input
                    type="checkbox"
                    onChange={this.onChangeChecked.bind(this, val, key)}
                    checked={val.checked}
                  />
                  {val.title}
                  <button onClick={this.delItem.bind(this, val, key)}>删除</button>
                </li>
              );
            }
          })}
        </ul>
      </div>
    );
  }
}

export default Completed;
此组件 还可再分

todoList 组件

import React from "react";
import Headr from "./Headr"
import Completed from "./Completed"

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
     username:'',
      list: [
        {
          title: "吃饭",
          checked: true
        },
        {
          title: "下班",
          checked: true
        },
        {
          title: "洗澡",
          checked: false
        },
        {
          title: "睡觉",
          checked: false
        }
      ]
    };
  }
 
  // 删除数据
  del=(val,key)=>{
      console.log(key,val)
      let list = this.state.list
      list.splice(val,1)
      this.setState({
          list,
      })

  }
  // 添加单条数据  注意this 指向问题
  addList=(text)=>{
    console.log(text)
    var temp=this.state.list
    console.log(temp)
    temp.push({title:text,checked:false})
    this.setState({
        temp,
    })
    this.setState({
     username:''
  })
  }
     // 更改 选择框的值 注意拆分后的this 指向问题
     checkboxCheckd(val,key){
      console.log(val.checked,key)
      console.log(this.state.list)
      let list =this.state.list
      list[key].checked=!val.checked
      this.setState({
    list,
      })
  }
  
  render() {
    return (
      <div>
          <Headr addList={this.addList}/>
           <Completed list={this.state} checkboxCheckd={this.checkboxCheckd.bind(this) } del={this.del} />
        </div>
    );
 }
}

export default TodoList

注意更改数据的 函数都在父组件里 react 遵循单向数据流 数据都是 由父组件 流向子组件