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

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

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

    
    
  
     
Todo List
    
       
             Hide Completed Tasks      
       
     
    
     
    

你可以看到要在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.tasksgetMeteorData() {    // 修改开始  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})
            // 修改结束