资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/翻译 Meteor React 制作 Todos - 08 - 模板UI的状态

翻译 Meteor React 制作 Todos - 08 - 模板UI的状态

dcr309duan / 3381人阅读

摘要：组件有一个名叫状态的特殊变量。将会异步地更新状态属性，然后让组件重新渲染。使其可以在为时，过滤我们已完成的任务。因为我们已经有数据在客户端的里了，所以添加额外的总数并不会向服务器再次申请数据。

在组件状态中存储临时数据

在这个步骤，我们会在为应用的客户端添加数据过滤特性，这样用户就可以通过点击’确认选框‘来查看当前进行的任务。我们会去学习如何仅在客户端使用React组件状态来存储临时模板

首先，我们需要在我们的App组件中，添加’确认选框‘




  
Todo List


    
  
    

  

    

你可以看到要在this.state.hideCompleted上的读取属性。React组件有一个名叫state（状态）的特殊变量(field)。你可以在state中存储运算后的组件数据，我们需要在组件中去定义一个叫做getInitialState的方法来初始化这个变量


// 在App.jsx文件中
// 这个mixin将会使得getMeteorData方法正常执行
mixins: [ReactMeteorData],

// 添加开始
getInitialState() {
  return {
    hideCompleted: false
  }
},
// 添加结束

// 从Tasks集合中读取数据并传送到this.data.tasks中
getMeteorData() {
  return {


你可以在事件监听中通过从一个叫做this.setState的方法来更新this.state。this.setState将会异步地更新状态属性，然后让组件重新渲染。


// 在App.jsx文件中

  React.findDOMNode(this.refs.textInput).value = "";
},

// 添加开始
toggleHideCompleted() {
  this.setState({
    hideCompleted: ! this.state.hideCompleted
  });
},
// 添加结束

render() {
  return (
    


现在我们得更新getMeteorData方法。使其可以在this.state.hideCompleted为true时，过滤我们已完成的任务。


// 在App.jsx文件中 

// 从Tasks集合中读取数据并传给this.data.tasks
getMeteorData() {

    // 修改开始
  let query = {};

  if (this.state.hideCompleted) {
    // If hide completed is checked, filter tasks
    query = {checked: {$ne: true}};
  }

  return {
    tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch()
  };
    // 修改结束

},

renderTasks() {


现在，如果你确认了任务已完成，任务列表中将会只显示那些没有被完成的任务。

再来个特性：显示未完成任务的数量

我们已经编写了语句来过滤已完成的任务，我们也可以使用相同的语句去展示没有被确认完成的任务的数量。要完成这个特性，我们要从getMeteorData的方法中获取总数，然后再render方法中添加一行。因为我们已经有数据在客户端的MiniMongo里了，所以添加额外的总数并不会向服务器再次申请数据。


// 在App.jsx文件的getMeteorData的return改成这样
return {
      tasks: Tasks.find(query, {sort: {createdAt: -1}}).fetch(),
      incompleteCount: Tasks.find({checked: {$ne: true}}).count()
    };


// 在App.jsx的render方法的return 附近，添加这么一句
return (
  

    


        // 修改开始
      
Todo List ({this.data.incompleteCount})

            // 修改结束

      

            
                     

                 

                                                                                                                    
                         云服务器
                                             
                         GPU云服务器
                                                                                                                                                 
                                      
                     
                    
                                                                                               php制作的模板
                                                                                                           ui制作
                                                                                                           网站模板在线制作
                                                                                                           Todos
                                                         
                 

               
              

             
               

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

                 
                   
转载请注明本文地址：https://www.ucloud.cn/yun/86088.html

相关文章

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

    摘要：在上，最好的方法就是通过声明方法。这些方法叫做还有，这将会替换执行的方法。我们做这些是为了开启一个我们称之为乐观的的特性。客户端向服务器端发送一个在安全环境下的请求。 方法的安全性 在这个步骤之前，这款应用的任何用户都可以修改数据库的任何部分，在一个非常有意思的小项目或者演示项目中可能已经不错了，但是任何一个真实的应用都需要对这些数据进行权限控制。在Meteor上，最好的方法就是通过声...

    Steven 评论0 收藏0

  • 翻译 Meteor React 制作 Todos - 09 - 添加用户账户

    摘要：为了开启这套账户系统和界面，我们需要去添加相关的包。使用，而不是在文件加入开始这段代码只会在客户端执行加入结束添加用户关联功能现在你已经可以创建账户并登录你的应用程序了。例如包含了已登陆用户的用户名。 添加多用户账户 Meteor带来了一套账户系统然后顺便还带了用户界面来让你可以在几分钟之内在你的应用中添加多用户功能 目前，这套UI组件使用Blaze作为默认的UI引擎，在未来，可能会以...

    levius 评论0 收藏0

  • 翻译 Meteor React 制作 Todos - 02 - 组件

    摘要：用定义视图组件在中，视图组件是被使用定义的。你的组件可以有任何你想要的方法。组件可以接收来自于父组件通过属性传过来的数据。因为本教程专注于和，所以你可以拷贝下面的代码到文件中。嘿嘿，来添加上吧只要把改名成就好了 在 React 组件中定义视图 在开始编写React视图库之前，要先添加react包，这个包囊括了你在Meteor应用中开始运行React所需要所有东西。这个React库自己可...

    wuyangnju 评论0 收藏0

  • 翻译 Meteor React 制作 Todos - 11 - 发布订阅

    摘要：通过发布订阅模式过滤数据现在我们已经把应用中比较敏感的代码放到了一些方法里面，我们还需要学习安全故事的另一半内容了。当在客户端被调用时传入发布器名称，客户端将会从发布器订阅所有的数据。这个按钮应该只是给任务的所有者来显示。 通过发布订阅模式过滤数据 现在我们已经把应用中比较敏感的代码放到了一些方法里面，我们还需要学习Meteor安全故事的另一半内容了。到现在为止，我们一直是假设整个整个...

    用户83 评论0 收藏0

  • 翻译 Meteor React 制作 Todos - 01 - 创建应用

    摘要：闲扯在翻译之前我还是要简要介绍一下，这是一款跨时代的框架。后来开始使用动态的脚本语言，比如后来以此构成了框架。最为出名的自然是。通过来传递数据，在本地起这种事情使得开发进入了新的阶段。如果你觉得我翻译的很烂，来给我说吧邮件地址 闲扯 在翻译之前我还是要简要介绍一下Meteor，这是一款跨时代的框架。真的，完全没有骗你。 一开始的网站是纯静态页面搭建的。 后来开始使用动态的脚本语言，比如...

    VishKozus 评论0 收藏0

发表评论

登陆后可评论

0条评论

dcr309duan

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<