React父子组件间通信的实现方式

React学习笔记之父子组件间通信的实现：
今天弄清楚了父子组件间通信是怎么实现的。父组件向子组件通信是通过向子组件传递参数props：

 // APP.js
 return (
  


    
我的待办
    

      
    
    

      {todos}
    
  
);
 changeTitle(event) {
 this.setState({
   newTodo: event.target.value,
   todoList: this.state.todoList
 })
}
  addTodo(event) {
    this.state.todoList.push({
      id: idMaker(),
      title: event.target.value,
      status: null,
      deleted: false
    })
    console.log('addtodo')
    this.setState({
      newTodo: '',
      todoList: this.state.todoList
    })

  }

// TodoInput.js

    export default class TodoInput extends Component {
    render() {
        return 
    }
    submit(e) {
        if (e.key == 'Enter') {
                 //调用父组件里的onSubmit函数，
                 //并将事件对象作为参数传递进去
            this.props.onSubmit(e)  
            console.log('enter')
        }
    }
    changeTitle(event) {
        this.props.onChange(event)
    }
}

父组件中实例化一个子组件时传递了参数content={this.state.newTodo,这是一个字符串this.state = { newTodo: '', todoList: [ ] }，这样实现了父组件向子组件传递了参数。

那么子组件是怎么向父组件通信的呢？父组件向子组件通信是传递参数，很自然的如果传递的是父组件里定义的回调函数，子组件通过props来调用这个回调函数，也就实现了子组件向父组件通信的目的了。上面的onChange和onSubmit都是父组件向子组件传递的props里，而且他们都指向父组件里的changeTitle和addTodo函数，在需要时，子组件就可以通过props调用它们，这样就实现了子组件向父组件通信的目的。一句话总结：当传递数据给子组件的props时:

content={this.state.newTodo}

，就是父组件向子组件通信，当传递的是回调函数名给props时:
onChange={this.changeTitle.bind(this)}

，就是子组件向父组件通信。

事例源码：GitHub源码