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