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

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

 // APP.js
 return (
  <div className='App'>

    <h1>我的待办</h1>
    <div className="inputWrapper">
      <TodoInput content={this.state.newTodo}
        onChange={this.changeTitle.bind(this)}
        onSubmit={this.addTodo.bind(this)} />
    </div>
    <ol className='todoList'>
      {todos}
    </ol>
  </div>
);
 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 <input type='text' value={this.props.content}
            className="TodoInput"
            //这里为什么要绑定this呢，因为在事件的回调函数（
            //也就是changeTitle）里，this是指向触发事件的目标元素，
            //而我们对this有特殊的用途，必须让this指向子组件本身，
            //我们才能取到props里的回调函数，来加以调用。因此必须
            //绑定this指向子组件。
            onChange={this.changeTitle.bind(this)}
            onKeyPress={this.submit.bind(this)}
             />
    }
    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源码