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

Hujiawei 發布于2019-08-21 10:43 / 456人閱讀

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

通過表單(form)添加任務

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

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


  
    Todo List

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

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

現在來在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() // 當前時間
    });
 
    // 復原表單
    React.findDOMNode(this.refs.textInput).value = "";
  },
  // 添加結束
 
  render() {
    return (

現在你的應用有了新的輸入框。現在添加任務只需要在輸入框內寫一點東西，然后按下Enter鍵就可以了。如果你再開一個新的瀏覽器窗口并再一次打開這個應用，你將看到任務列表自動的在兩個客戶端上進行同步

在React上監聽事件

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

向集合中插入數據

在事件響應函數中，我們通過調用Tasks.insert()方法，添加了任務(數據)到tasks集合中。
因為我們并不需要在集合中定義字段(schema)，所以我們可以賦值任何屬性到我們的task對象中，比如創建時間(createdAt)

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

對任務進行排序

現在，我們的代碼在列表的底部，展示了所有新的任務。這對一個任務列表來說并不是非常好。因為我們正常情況下是想看到最新的數據在最頂上。

我們可以通過對結果的createdAt字段進行排序來解決這個問題。它將會自動的在我們的新代碼上做調整。

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

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

現在返回到瀏覽器確認它是不是正常運行了。任何你所添加的新的任務將會出現在列表的頂部，不再是底部了。

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

云服務器 GPU云服務器表單制作如何制作表單 html表單制作制作html表單

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86063.html

翻譯 Meteor React 制作 Todos - 11 - 發布訂閱

摘要：通過發布訂閱模式過濾數據現在我們已經把應用中比較敏感的代碼放到了一些方法里面，我們還需要學習安全故事的另一半內容了。當在客戶端被調用時傳入發布器名稱，客戶端將會從發布器訂閱所有的數據。這個按鈕應該只是給任務的所有者來顯示。通過發布訂閱模式過濾數據現在我們已經把應用中比較敏感的代碼放到了一些方法里面，我們還需要學習Meteor安全故事的另一半內容了。到現在為止，我們一直是假設整個整個...

用戶83 2019-08-22 10:58 評論0 收藏0
翻譯 Meteor React 制作 Todos - 10 - 方法的安全性

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

Steven 2019-08-21 10:43 評論0 收藏0
翻譯 Meteor React 制作 Todos - 01 - 創建應用

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

VishKozus 2019-08-21 10:42 評論0 收藏0
翻譯 Meteor React 制作 Todos - 05 - 更新刪除

摘要：現在，我們來學習如何進行更新和刪除操作。添加內容開始添加內容結束更新在上面的代碼中，我們在確認屬性被改變的時候調用了方法。刪除在上面的代碼中使用了來刪除任務。這個函數需要一個參數，一個確定集合中那個子項應該被被刪除的身份證號碼。確認完成和刪除任務到現在為止，我們只有一個和集合互動的方法 -- 在文檔中進行插入操作。現在，我們來學習如何進行更新和刪除操作。先來給task組件添加兩個...

wenshi11019 2019-08-22 10:57 評論0 收藏0
翻譯 Meteor React 制作 Todos - 09 - 添加用戶賬戶

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

levius 2019-08-21 10:43 評論0 收藏0