React基础-组件的拆分，父子组件之间消息的传递

上一篇博客中写的ToDoList练习，是将所有的内容都写在了一个组件中。
React基础练习-ToDoList

但是在实际工作中肯定是团队开发，我们会把一个大功能分成不同的组件。

今天要学习的内容是，组件的拆分，与父子组件间，消息的传递。

1.父组件向子组件传递内容，靠属性的形式传递。
2.React有明确规定，子组件是不能操作父组件里的数据的，所以需要借助一个父组件的方法，来修改父组件的内容
3.如果子组件要调用父组件方法，其实和传递数据差不多，只要在组件调用时，把方法传递给子组件就可以了,记得这里也要进行this的绑定，如果不绑定子组件是没办法找到这个父组件的方法的。
ToDoList.js

import React, { Component } from 'react';
import GameItem from './GameItem';
class ToDoList extends Component {
    constructor(props) {
        super(props);
        this.state = {  
            defaultValue:'',
            list:[
                '跑跑卡丁车',
                '真三国无双',
                '穿越火线'
            ]
        }
        this.addList = this.addList.bind(this);
    }
    render() { 
        return (
            <div>
                <input value={this.state.defaultValue} onChange={this.inputChange.bind(this)}/><button onClick={this.addList}>添加游戏</button>
                <ul>
                    {
                        this.state.list.map((value,key)=>{
                            return  <GameItem 
                                        content={value}
                                        key={key+value}
                                        index={key}
                                        deleteItem={this.deleteItem.bind(this)}    
                                    />                   
                        })
                    }
                </ul>
               
            </div>
          );
    }
    inputChange(e){
        console.log(e.target.value)
        this.setState({
            defaultValue:e.target.value
        })
    }
    addList(e){
        let newList = this.state.list;
        newList.push(this.state.defaultValue);
        
        this.setState({
            list:newList,
            defaultValue:''
        })
    }
    deleteItem(index){
        let newList = this.state.list;
        newList.splice(index,1);
        this.setState({
            list:newList
        })
    }
}
 
export default ToDoList;

GameItem.js

import React, { Component } from 'react';
class GameItem extends Component {
    constructor(props) {
        super(props);
        this.state = {  }
    }
    render() { 
        return ( 
            <div>
                <li key={this.props.index} onClick={this.handleClick.bind(this,this.props.index)}>{this.props.content}</li>
            </div>
         )
    }
    handleClick(){
        this.props.deleteItem(this.props.index)
    }
}
 
export default GameItem;