React.js 小书 Lesson15 - 实战分析：评论功能（二）
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson15
转载请注明出处，保留原文链接以及作者信息
在线阅读：http://huziketang.com/books/react
上一节我们构建了基本的代码框架，现在开始完善其他的内容。
处理用户输入
我们从 ComponentInput 组件开始，学习 React.js 是如何处理用户输入的。首先修改 ComponentInput.js，完善 ComponentInput 的 render 函数中的 HTML 结构：
import React, { Component } from 'react'
class CommentInput extends Component {
render () {
return (
用户名：
评论内容：
)
}
}
export default CommentInput
在浏览器中可以看到 ComponentInput 的结构和样式都已经生效：
[图片上传失败...(image-131ff0-1510226601202)]
因为还没有加入处理逻辑，所以你输入内容，然后点击发布是不会有什么效果的。用户可输入内容一个是用户名（username），一个是评论内容（content），我们在组件的构造函数中初始化一个 state 来保存这两个状态：
...
class CommentInput extends Component {
constructor () {
super()
this.state = {
username: '',
content: ''
}
}
...
}
...
然后给输入框设置 value 属性，让它们的 value 值等于 this.state 里面相应的值：
...
用户名：
评论内容：
...
可以看到接受用户名输入的 和接受用户评论内容的 的 value 值分别由 state.username 和 state.content 控制。这时候你到浏览器里面去输入内容看看，你会发现你什么都输入不了。
这是为什么呢？React.js 认为所有的状态都应该由 React.js 的 state 控制，只要类似于 、、 这样的输入控件被设置了 value 值，那么它们的值永远以被设置的值为准。值不变，value 就不会变化。
例如，上面设置了 的 value 为 this.state.username，username 在 constructor 中被初始化为空字符串。即使用户在输入框里面尝试输入内容了，还是没有改变 this.state.username 是空字符串的事实。
所以应该怎么做才能把用户内容输入更新到输入框当中呢？在 React.js 当中必须要用 setState 才能更新组件的内容，所以我们需要做的就是：监听输入框的 onChange 事件，然后获取到用户输入的内容，再通过 setState 的方式更新 state 中的 username，这样 input 的内容才会更新。
...
...
上面的代码给 input 加上了 onChange 事件监听，绑定到 this.handleUsernameChange 方法中，该方法实现如下：
...
handleUsernameChange (event) {
this.setState({
username: event.target.value
})
}
...
在这个方法中，我们通过 event.target.value 获取 中用户输入的内容，然后通过 setState 把它设置到 state.username 当中，这时候组件的内容就会更新，input 的 value 值就会得到更新并显示到输入框内。这时候输入已经没有问题了：
[图片上传失败...(image-b1ad5-1510226601202)]
类似于 、、