Between the traditional values assembly React

Currently I have two components
1.Todoitem
2.TodoList
where traditional values TodoList to TodoItem

Detailed part by value:
parent component subassembly to pass through the value of the property in the form of

import TodoItem from './TodoItem';

Remember the introduction of sub-assemblies

this.state.list.map((item,index)=>{
                            return (
                                <div>
                                <TodoItem content={item}
                                          index={index}
                                          handleItemDelete={this.handleItemDelete.bind(this)}

Here is my list this cycle by JSX grammar array
subassemblies to the parent component by value in the form of properties
such as: content={item}
add a subcomponent a content property

handleItemDelete={this.handleItemDelete.bind(this)

A method for the transfer of a parent component subassembly must pass .bind (this) this refers to the change, it is changed to point to the parent when the parent component or components become undefined use of

Subassembly receiving parent components pass Found:

this.props.content

Subassembly receiving method for transferring parent components:

 this.props.handleItemDelete(this.props.index)// 这里的index也是父组件传递过来的

Here is the method that is the parent component of a direct call, be sure to pay attention to this points to a problem
in general is in a subassembly write a listener function, and then call this function monitor function

Todoitem Code

import React, {Fragment} from 'react';
import './style.css'

class TodoItem extends React.Component{

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        // 也可以直接在onClick事件中去写.bind(this) 为了节约性能
    }
    render() {
        return (
            <Fragment>
                <div onClick={this.handleClick}>
                    {this.props.content}
                </div>
            </Fragment>
        )
    }
    handleClick(){
        this.props.handleItemDelete(this.props.index)
        // 如果仅仅这么去写会出现错误，这里的this是指向子组件的this如果我们要调用父组件的方法
        // 则this指向也应该指向父组件
    }
}

export default TodoItem;

TodoList

import React, {Fragment} from 'react';
import './style.css';
import TodoItem from './TodoItem';

class TodoList extends React.Component{

    constructor(props) {
        super(props);
        this.state={
            inputValue:"",
            list:[]
        } // 叫做组件的状态，并且用来存值
    }
    render(){
        return (
            <Fragment>
                <div className="App">
                    {/*如果你在label这里直接写for react会默认为循环  */}
                    <label htmlFor="insertArea">输入内容</label>
                    <input className='input'
                           id="insertArea"
                            value={this.state.inputValue}
                            onChange={this.handleInputChange.bind(this)
                            }
                    />
                    <button onClick={this.handleButtonClick.bind(this)}>提交</button>
                </div>
                <ul>
                    {/*this.handleItemDelete.bind(this,index)指的是给每一个这样的函数
                     添加一个单击响应函数
                     */}
                    {
                        this.state.list.map((item,index)=>{
                            return (
                                <div>
                                <TodoItem content={item}
                                          index={index}
                                          handleItemDelete={this.handleItemDelete.bind(this)}
                                />
                            {/*
                            handleItemDelete={this.handleItemDelete()}
                            是将这个方法传递给子组件
                            <li key={index}
                            onClick={this.handleItemDelete.bind(this,index)}
                            >{item}</li>*/}
                            {/*如果不转义添加一个这个 dangerouslySetInnerHTML={{__html:item}}*/}
                                </div>
                            );


                     })
                    }
                </ul>
            </Fragment>
        )
    }
    handleInputChange(e) {
        console.log(this);
        this.setState({
            inputValue:e.target.value
        });
        // 如果想要改变state的值则必须通过this.setState这个方法来实现，在每一个方法中都有
        //console.log(e.target)// 这里打印出来的target 就是获取的节点
    }
    handleButtonClick(e){
        this.setState({
            list: [...this.state.list,this.state.inputValue],
            // ... 扩展运算符的作用将以前的数组展开并生成一个新的数组,然后复制给list进行变化
            inputValue:''
        });
    }
    handleItemDelete(index){
    // 通过在bind(this,index)多写一个index来传入 经过测试this和index 无法一起传入
        // 有一种东西叫immutable
        // state 不允许我们做任何的改变
        console.log(index);
        const list=[...this.state.list]; // 这句话只是将list拷贝出来
        list.splice(index,1);
        this.setState({
            list:list
        })
    }
}
export default TodoList;