国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

翻譯 Meteor React 制作 Todos - 04 - 表單與事件

Hujiawei / 452人閱讀

摘要：通過表單添加任務(wù)在這個(gè)步驟，我們將為用戶在列表上添加輸入框。在中，這是一種監(jiān)聽瀏覽器事件的方式，就像是在表單上有提交事件一樣。這對一個(gè)任務(wù)列表來說并不是非常好。在下一步，我們將給待辦事宜的列表添加一個(gè)非常重要的功能已完成功能和刪除功能

通過表單(form)添加任務(wù)

在這個(gè)步驟，我們將為用戶在列表上添加輸入框。

首先，在App.jsx文件中App組件上添加表單吧。


  

    
Todo List

        
    

      
    

    
  


  
    提示：你也可以在你的JSX代碼中添加注釋，用{/*...*/}包裹注釋內(nèi)容

    你能看到form元素上有一個(gè)onSubmit屬性，它調(diào)用了在組件中一個(gè)叫做handleSubmit的方法。
    在React中，這是一種監(jiān)聽瀏覽器事件的方式，就像是在form表單上有提交(submit)事件一樣。
    input元素有一個(gè)ref屬性，這個(gè)屬性將會讓我們可以更加簡單的使用這個(gè)元素，過一會兒就知道了

    現(xiàn)在來在App.jsx文件中的App組建上添加handleSubmit方法吧。

        });
  },

    // 添加開始 
  handleSubmit(event) {
    event.preventDefault();
 
    // 通過React的ref屬性找到輸入框的值
    var text = React.findDOMNode(this.refs.textInput).value.trim();
 
    Tasks.insert({
      text: text,
      createdAt: new Date() // 當(dāng)前時(shí)間
    });
 
    // 復(fù)原表單
    React.findDOMNode(this.refs.textInput).value = "";
  },
  // 添加結(jié)束
 
  render() {
    return (

    現(xiàn)在你的應(yīng)用有了新的輸入框。現(xiàn)在添加任務(wù)只需要在輸入框內(nèi)寫一點(diǎn)東西，然后按下Enter鍵就可以了。如果你再開一個(gè)新的瀏覽器窗口并再一次打開這個(gè)應(yīng)用，你將看到任務(wù)列表自動的在兩個(gè)客戶端上進(jìn)行同步

    在React上監(jiān)聽事件

    正如你所看到的那樣，在React中，你直接通過在組件中調(diào)用函數(shù)方法來掌控DOM事件，在事件方法的內(nèi)部你可以從組件中調(diào)用元素，而只需要賦予它們一個(gè)ref屬性，然后用React.findDOMNode來找到該元素。
    希望了解更多不同的React所支持的事件，并了解其內(nèi)部原理，請閱讀React docs

    向集合中插入數(shù)據(jù)

    在事件響應(yīng)函數(shù)中，我們通過調(diào)用Tasks.insert()方法，添加了任務(wù)(數(shù)據(jù))到tasks集合中。
    因?yàn)槲覀儾⒉恍枰诩现卸x字段(schema)，所以我們可以賦值任何屬性到我們的task對象中，比如創(chuàng)建時(shí)間(createdAt)

    允許任何在客戶端的數(shù)據(jù)直接傳入數(shù)據(jù)庫并不是很安全，現(xiàn)在就別管這么多了，你知道就好。在第十章我們將學(xué)習(xí)如何使我們的應(yīng)用有更多的限制和更好的安全性 -- 通過定義如何使數(shù)據(jù)插入到數(shù)據(jù)庫中

    對任務(wù)進(jìn)行排序

    現(xiàn)在，我們的代碼在列表的底部，展示了所有新的任務(wù)。這對一個(gè)任務(wù)列表來說并不是非常好。因?yàn)槲覀冋Ｇ闆r下是想看到最新的數(shù)據(jù)在最頂上。

    我們可以通過對結(jié)果的createdAt字段進(jìn)行排序來解決這個(gè)問題。它將會自動的在我們的新代碼上做調(diào)整。

    我們所要做的就是在find方法中添加排序選項(xiàng)。它位于App組件的getMeteorData方法中。

      getMeteorData() {
    return {
      tasks: Tasks.find({}, {sort: {createdAt: -1}}).fetch()
    }
  },

    現(xiàn)在返回到瀏覽器確認(rèn)它是不是正常運(yùn)行了。任何你所添加的新的任務(wù)將會出現(xiàn)在列表的頂部，不再是底部了。

    在下一步，我們將給待辦事宜的列表添加一個(gè)非常重要的功能：已完成功能和刪除功能

    文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

    轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/86063.html

    相關(guān)文章

    • 翻譯 Meteor React 制作 Todos - 11 - 發(fā)布訂閱

      摘要：通過發(fā)布訂閱模式過濾數(shù)據(jù)現(xiàn)在我們已經(jīng)把應(yīng)用中比較敏感的代碼放到了一些方法里面，我們還需要學(xué)習(xí)安全故事的另一半內(nèi)容了。當(dāng)在客戶端被調(diào)用時(shí)傳入發(fā)布器名稱，客戶端將會從發(fā)布器訂閱所有的數(shù)據(jù)。這個(gè)按鈕應(yīng)該只是給任務(wù)的所有者來顯示。 通過發(fā)布訂閱模式過濾數(shù)據(jù) 現(xiàn)在我們已經(jīng)把應(yīng)用中比較敏感的代碼放到了一些方法里面，我們還需要學(xué)習(xí)Meteor安全故事的另一半內(nèi)容了。到現(xiàn)在為止，我們一直是假設(shè)整個(gè)整個(gè)...

      用戶83 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 10 - 方法的安全性

      摘要：在上，最好的方法就是通過聲明方法。這些方法叫做還有，這將會替換執(zhí)行的方法。我們做這些是為了開啟一個(gè)我們稱之為樂觀的的特性。客戶端向服務(wù)器端發(fā)送一個(gè)在安全環(huán)境下的請求。 方法的安全性 在這個(gè)步驟之前，這款應(yīng)用的任何用戶都可以修改數(shù)據(jù)庫的任何部分，在一個(gè)非常有意思的小項(xiàng)目或者演示項(xiàng)目中可能已經(jīng)不錯(cuò)了，但是任何一個(gè)真實(shí)的應(yīng)用都需要對這些數(shù)據(jù)進(jìn)行權(quán)限控制。在Meteor上，最好的方法就是通過聲...

      Steven 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 01 - 創(chuàng)建應(yīng)用

      摘要：閑扯在翻譯之前我還是要簡要介紹一下，這是一款跨時(shí)代的框架。后來開始使用動態(tài)的腳本語言，比如后來以此構(gòu)成了框架。最為出名的自然是。通過來傳遞數(shù)據(jù)，在本地起這種事情使得開發(fā)進(jìn)入了新的階段。如果你覺得我翻譯的很爛，來給我說吧郵件地址 閑扯 在翻譯之前我還是要簡要介紹一下Meteor，這是一款跨時(shí)代的框架。真的，完全沒有騙你。 一開始的網(wǎng)站是純靜態(tài)頁面搭建的。 后來開始使用動態(tài)的腳本語言，比如...

      VishKozus 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 05 - 更新刪除

      摘要：現(xiàn)在，我們來學(xué)習(xí)如何進(jìn)行更新和刪除操作。添加內(nèi)容開始添加內(nèi)容結(jié)束更新在上面的代碼中，我們在確認(rèn)屬性被改變的時(shí)候調(diào)用了方法。刪除在上面的代碼中使用了來刪除任務(wù)。這個(gè)函數(shù)需要一個(gè)參數(shù)，一個(gè)確定集合中那個(gè)子項(xiàng)應(yīng)該被被刪除的身份證號碼。 確認(rèn)完成和刪除任務(wù) 到現(xiàn)在為止，我們只有一個(gè)和集合互動的方法 -- 在文檔中進(jìn)行插入操作。現(xiàn)在，我們來學(xué)習(xí)如何進(jìn)行更新和刪除操作。 先來給task組件添加兩個(gè)...

      wenshi11019 評論0 收藏0

    • 翻譯 Meteor React 制作 Todos - 09 - 添加用戶賬戶

      摘要：為了開啟這套賬戶系統(tǒng)和界面，我們需要去添加相關(guān)的包。使用，而不是在文件加入開始這段代碼只會在客戶端執(zhí)行加入結(jié)束添加用戶關(guān)聯(lián)功能現(xiàn)在你已經(jīng)可以創(chuàng)建賬戶并登錄你的應(yīng)用程序了。例如包含了已登陸用戶的用戶名。 添加多用戶賬戶 Meteor帶來了一套賬戶系統(tǒng)然后順便還帶了用戶界面來讓你可以在幾分鐘之內(nèi)在你的應(yīng)用中添加多用戶功能 目前，這套UI組件使用Blaze作為默認(rèn)的UI引擎，在未來，可能會以...

      levius 評論0 收藏0

    發(fā)表評論

    0條評論

    最新活動
    閱讀需要支付1元查看
    <