Lesson14-16组件

关于组件划分要注意三点：

1 组件的划分没有特别明确的标准。

2 以增强代码的复用性、可维护性为目的。

3 某个业务独立性很强，抽离出来后对代码的组织和管理有帮助也可以抽离

在 React.js 当中必须要用 setState 才能更新组件的内容，如果我们给input绑定了value值，那么该Input框即变得不可输入，因为无法改变state中对应的状态值，只有监听input的change事件，在事件函数中通过this.setState函数修改对应的状态值，才能实现Input框可输入（类似于双向数据绑定）

4 父组件向子组件传值

    <div className='comment-field-input'>
      <input
        value={this.state.username}
        onChange={this.handleUsernameChange.bind(this)} />
    </div>

 handleUsernameChange (event) {
    this.setState({
      username: event.target.value
    })
  }

5 子组件向父组件传值

(1)父组件定义函数

handleSubmitComment(param){
    console.log(param)
}

(2)将父组件定义的函数作为参数传递给子组件

<CommentInput onSubmit={this.handleSubmitComment.bind(this)} />

(3)在子组件中调用此函数，将值作为参数传入此函数，这样父组件就可以拿到子组件中的值了

 handleSubmit(e){
    if(this.props.onSubmit){
        const {username,content} = this.state
        this.props.onSubmit({username,content})
    }
    this.setState({
        content:''
    })
}