React ToDolist increase functionality

Supplementary knowledge 
1 == "npm install prop-types packages to verify the installation parameters 

incorporated BC page 
import PropTypes 'prop-types' // parameter limits from

    // page B verification parameter necessity 
    static propTypes = { 
        len: PropTypes.number.isRequired, 
        addtod: PropTypes.func.isRequired 
    }

C // necessity authentication parameter page 
static propTypes = {todolist: PropTypes.array.isRequired}

 

 

 

Summary of the todelist of

 1 == "the data in the parent component 

    constructor (The props) { 
          Super (The props); 
          the this .STATE = { 
              ToDoList: [ 
                  {ID: 1, text:" web111 " }, 
                  {ID: 2, text: "web222" }, 
                  {ID: . 3, text: "web333" } 
              ] 
          } 
    }


 2 == "component in the data transmitted to the parent sub-assembly (father to son) 
 the let ToDoList {} = the this .STATE; / / structure 
 <C ToDoList ToDoList = {}> </ C> 


. 3 == "subassembly render 
 the render () { 
        the let {} ToDoList= The this .props; 
        the console.log ( "the value passed over" , ToDoList)
         return (
          <UL> 
               {todolist.map ((Item, index) => {
                  return   <Li Key index = {}>} {item.Text < / Li>
                })}
          </ UL>
         ) 
    }


 . 4 == "the length of the assembly transmitted to the parent sub-assembly
  <B todolist.length len = {} = {addtod the this .addtod}> </ B> parent 
   



5 == "subassembly render 
   the render () { 
        the let len {} = the this .props
         return (
             <div>
                <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button>
            </div>        )
    }6==》点击按钮获取到值
    render() {
        let { len}=this.props
        return (
            <div>
                <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button>
            </div>        )
    }
    add=()=>{
        console.log(this.refs.conn.value) 
        let uservalu = this.refs.conn.value; get the value//









        {} addtod the let = the this .props; // parent element like a subassembly passed method 

        addtod (uservalu)   // This method is called 

        the this .refs.conn.value = ""; // Clear 
    }

 7 == "parent component the method of delivery to the subassembly


 8 == "method call the parent subassembly assembly and returns the contents of a form


 9 ==" parent element receiving subassemblies back to the state data changes

 

 

 

The following is the complete code

A.js title

import React, { Component } from "react"
export default class A extends Component {
    render() {
        return (
            <div>我是标题  todo list</div>
        )
    }
}

 

 

B.js forms and buttons

import React, { Component } from "react"
export default class B extends Component {

    add=()=>{
        console.log(this.refs.conn.value) 
        let uservalu = this.refs.conn.value; //获取值

        let {addtod}=this.props;//父组件想子组件传递了一个方法

        addtod(uservalu)  //调用这个方法

        this.refs.conn.value=""; //清空
    }

    render() {
        let { len}=this.props
        return (
            <div>
                <input type="text" ref="conn" /><button onClick={this.add} >123#{len}</button>
            </div>
        )
    }
}

 

C.js 渲染

import React, { Component } from "react"
export default class C extends Component {
//    constructor(props){
//        super(props);
//        let { todolist}=this.props; 
//    }

    render() {
        let { todolist } = this.props; //它等价于上面的哪一个内容
        console.log("值传递过来",todolist)
        return (
         <ul>
               {todolist.map((item,index)=>{
                 return  <li key={index}>{item.text}</li>
               })}
         </ul>
        )
    }
}

 

最大父组件DoAddList.js

import React, { Component } from "react"

// 引入组件
import A from "./A"
import B from "./B"
import C from "./C"


export default class DoAddList extends Component {

    constructor(props){
          super(props);
          this.state={
              todolist:[
                  { id: 1, text: "web111" },
                  { id: 2, text: "web222" },
                  { id: 3, text: "web333" }
              ]
          }
    }

    addtod=(data)=>{
        let con=this.state.todolist;
        con.unshift({ id: this.state.todolist.length + 1, text: data })

        // 跟新状态
        this.setState({
            todolist: con
        })
    }
     
    render() {
        let { todolist}=this.state; //结构
        return (
            <div>
              <A></A>
                {/* 将右边的{this.addtod 方法传递给子组件 */}
                <B len={todolist.length} addtod={this.addtod}></B>
                {/*将父组件中的数据  传递给子组件(父传子)*/}
                <C todolist={todolist}></C>
            </div>
        )
    }
}