摘要:例如,上面設置了的為,在中被初始化為空字符串。如何向傳遞的數據父組件只需要通過給子組件傳入一個回調函數。當用戶點擊發布按鈕的時候,調用中的回調函數并且將傳入該函數即可。下一節中我們將介紹小書實戰分析評論功能三。
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 的結構和樣式都已經生效:
因為還沒有加入處理邏輯,所以你輸入內容,然后點擊發布是不會有什么效果的。用戶可輸入內容一個是用戶名(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 值就會得到更新并顯示到輸入框內。這時候輸入已經沒有問題了:
類似于 、、 這些元素的 value 值被 React.js 所控制、渲染的組件,在 React.js 當中被稱為受控組件(Controlled Component)。對于用戶可輸入的控件,一般都可以讓它們成為受控組件,這是 React.js 所推崇的做法。另外還有非受控組件,這里暫時不提及。
同樣地,讓 成為受控組件:
... handleContentChange (event) { this.setState({ content: event.target.value }) } ...向父組件傳遞數據評論內容:...
當用戶在 CommentInput 里面輸入完內容以后,點擊發布,內容其實是需要顯示到 CommentList 組件當中的。但這兩個組件明顯是多帶帶的、分離的組件。我們再回顧一下之前是怎么劃分組件的:
可以看到,CommentApp 組件將 CommentInput 和 CommentList 組合起來,它是它們倆的父組件,可以充當橋接兩個子組件的橋梁。所以當用戶點擊發布按鈕的時候,我們就將 CommentInput 的 state 當中最新的評論數據傳遞給父組件 CommentApp ,然后讓父組件把這個數據傳遞給 CommentList 進行渲染。
CommentInput 如何向 CommentApp 傳遞的數據?父組件 CommentApp 只需要通過 props 給子組件 CommentInput 傳入一個回調函數。當用戶點擊發布按鈕的時候,CommentInput 調用 props 中的回調函數并且將 state 傳入該函數即可。
先給發布按鈕添加事件:
......
用戶點擊按鈕的時候會調用 this.handleSumit 方法:
... handleSubmit () { if (this.props.onSubmit) { const { username, content } = this.state this.props.onSubmit({username, content}) } this.setState({ content: "" }) } ...
handleSumit 方法會判斷 props 中是否傳入了 onSubmit 屬性。有的話就調用該函數,并且把用戶輸入的用戶名和評論數據傳入該函數。然后再通過 setState 清空用戶輸入的評論內容(但為了用戶體驗,保留輸入的用戶名)。
修改 CommentApp.js ,讓它可以通過傳入回調來獲取到新增評論數據:
class CommentApp extends Component { handleSubmitComment (comment) { console.log(comment) } render() { return () } }
在 CommentApp 中給 CommentInput 傳入一個 onSubmit 屬性,這個屬性值是 CommentApp 自己的一個方法 handleSubmitComment。這樣 CommentInput 就可以調用 this.props.onSubmit(…) 把數據傳給 CommenApp。
現在在 CommentInput 中輸入完評論內容以后點擊發布,就可以看到 CommentApp 在控制臺打印的數據:
這樣就順利地把數據傳遞給了父組件,接下來我們開始處理評論列表相關的邏輯。
下一節中我們將介紹《React.js 小書 Lesson16 - 實戰分析:評論功能(三)》。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89688.html
摘要:因為工作中一直在使用,也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來,做成一本開源免費專業簡單的入門級別的小書,提供給社區。本書的后續可能會做成視頻版本,敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書 本文作者:胡子大哈本文原文:React.js 小書 轉載請注明出處,保留原文鏈接以及作者信息 在線閱讀:http://huzi...
摘要:對于上面這個評論功能,可以粗略地劃分成以下幾部分評論功能的整體用一個叫的組件包含起來。每個評論列表項由獨立的組件負責顯示,這個組件被所使用。下一節中我們將介紹小書實戰分析評論功能二。 React.js 小書 Lesson14 - 實戰分析:評論功能(一) 本文作者:胡子大哈本文原文:http://react.huziketang.com/blog/lesson14 轉載請注明出處,保...
摘要:所以我們給評論組件加上刪除評論的功能,這樣就可以刪除不想要的評論了。輸入這是代碼塊,這是正常內容。到目前為止,第二階段的實戰已經全部完成,你可以在這里找到完整的代碼。下一節中我們將介紹小書高階組件。 React.js 小書 Lesson27 - 實戰分析:評論功能(六) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson27 ...
摘要:接下來是實戰環節,我們會繼續上一階段的例子,把評論功能做得更加復雜一點。把已經發布的評論持久化,存放到瀏覽器的中。評論顯示發布日期,如秒前,分鐘前,并且會每隔秒更新發布日期。事件監聽方法,。下一節中我們將介紹小書實戰分析評論功能五。 React.js 小書 Lesson25 - 實戰分析:評論功能(四) 本文作者:胡子大哈本文原文:http://huziketang.com/book...
摘要:但是給傳遞的評論數據并沒有傳遞給,所以現在發表評論時沒有反應的。包括實現功能之前先理解分析需求,劃分組件。到此為止,小書的第一階段已經結束,你可以利用這些知識點來構建簡單的功能模塊了。 React.js 小書 Lesson16 - 實戰分析:評論功能(三) 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson16 轉載請注明出處...
閱讀 2761·2021-09-24 10:34
閱讀 1862·2021-09-22 10:02
閱讀 2253·2021-09-09 09:33
閱讀 1459·2021-08-13 15:02
閱讀 3271·2020-12-03 17:10
閱讀 1180·2019-08-30 15:44
閱讀 2144·2019-08-30 12:58
閱讀 3229·2019-08-26 13:40