React之间的组件传值

目前我有两个组件
1.Todoitem
2.TodoList
其中TodoList向TodoItem传值

传值部分详解：
父组件向子组件传值通过属性的形式

import TodoItem from './TodoItem';

记得引入子组件

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

这里是我通过JSX语法循环list这个数组
子组件向父组件传值通过属性的形式
如：content={item}
为子组件添加了一个content属性

handleItemDelete={this.handleItemDelete.bind(this)

为子组件传递了一个父组件的方法，一定要通过.bind(this) 将this指向改变，改变为指向父组件否则在父组件使用时会变成undefined的

子组件接受父组件传值：

this.props.content

子组件接受父组件方法传递：

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

这里即是直接调用父组件的方法了，一定要注意this的指向问题
一般来说是将在子组件中在写一个监听函数，然后再监听函数中调用此函数

Todoitem代码

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;