資訊專欄INFORMATION COLUMN
摘要：例如，上面設置了的為，在中被初始化為空字符串。如何向傳遞的數據父組件只需要通過給子組件傳入一個回調函數。當用戶點擊發(fā)布按鈕的時候，調用中的回調函數并且將傳入該函數即可。下一節(jié)中我們將介紹小書實戰(zhàn)分析評論功能三。
React.js 小書 Lesson15 - 實戰(zhàn)分析：評論功能（二）
本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson15
轉載請注明出處，保留原文鏈接以及作者信息
在線閱讀：http://huziketang.com/books/react
上一節(jié)我們構建了基本的代碼框架，現(xiàn)在開始完善其他的內容。
處理用戶輸入我們從 ComponentInput 組件開始，學習 React.js 是如何處理用戶輸入的。首先修改 ComponentInput.js，完善 ComponentInput 的 render 函數中的 HTML 結構：
import React, { Component } from "react"
class CommentInput extends Component {
render () {
return (
用戶名：
評論內容：
)
}
}
export default CommentInput
在瀏覽器中可以看到 ComponentInput 的結構和樣式都已經生效：
因為還沒有加入處理邏輯，所以你輸入內容，然后點擊發(fā)布是不會有什么效果的。用戶可輸入內容一個是用戶名（username），一個是評論內容（content），我們在組件的構造函數中初始化一個 state 來保存這兩個狀態(tài)：
...
class CommentInput extends Component {
constructor () {
super()
this.state = {
username: "",
content: ""
}
}
...
}
...
然后給輸入框設置 value 屬性，讓它們的 value 值等于 this.state 里面相應的值：
...
用戶名：
評論內容：
...
可以看到接受用戶名輸入的 和接受用戶評論內容的 的 value 值分別由 state.username 和 state.content 控制。這時候你到瀏覽器里面去輸入內容看看，你會發(fā)現(xiàn)你什么都輸入不了。
這是為什么呢？React.js 認為所有的狀態(tài)都應該由 React.js 的 state 控制，只要類似于 、、 這樣的輸入控件被設置了 value 值，那么它們的值永遠以被設置的值為準。值不變，value 就不會變化。
例如，上面設置了 的 value 為 this.state.username，username 在 constructor 中被初始化為空字符串。即使用戶在輸入框里面嘗試輸入內容了，還是沒有改變 this.state.username 是空字符串的事實。
所以應該怎么做才能把用戶內容輸入更新到輸入框當中呢？在 React.js 當中必須要用 setState 才能更新組件的內容，所以我們需要做的就是：監(jiān)聽輸入框的 onChange 事件，然后獲取到用戶輸入的內容，再通過 setState 的方式更新 state 中的 username，這樣 input 的內容才會更新。
...
...
上面的代碼給 input 加上了 onChange 事件監(jiān)聽，綁定到 this.handleUsernameChange 方法中，該方法實現(xiàn)如下：
...
handleUsernameChange (event) {
this.setState({
username: event.target.value
})
}
...
在這個方法中，我們通過 event.target.value 獲取 中用戶輸入的內容，然后通過 setState 把它設置到 state.username 當中，這時候組件的內容就會更新，input 的 value 值就會得到更新并顯示到輸入框內。這時候輸入已經沒有問題了：
類似于 、、