翻译 Meteor React 制作 Todos - 04 - 表单与事件

Hujiawei 发布于2019-08-21 10:43 / 408人阅读

摘要：通过表单添加任务在这个步骤，我们将为用户在列表上添加输入框。在中，这是一种监听浏览器事件的方式，就像是在表单上有提交事件一样。这对一个任务列表来说并不是非常好。在下一步，我们将给待办事宜的列表添加一个非常重要的功能已完成功能和删除功能

通过表单(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表单

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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