在组件状态中存储临时数据
在这个步骤,我们会在为应用的客户端添加数据过滤特性,这样用户就可以通过点击’确认选框‘来查看当前进行的任务。我们会去学习如何仅在客户端使用React组件状态来存储临时模板
首先,我们需要在我们的App
组件中,添加’确认选框‘
你可以看到要在this.state.hideCompleted
上的读取属性。React组件有一个名叫state
(状态)的特殊变量(field)。你可以在state
中存储运算后的组件数据,我们需要在组件中去定义一个叫做getInitialState
的方法来初始化这个变量
你可以在事件监听中通过从一个叫做this.setState
的方法来更新this.state
。this.setState
将会异步地更新状态属性,然后让组件重新渲染。
现在我们得更新getMeteorData
方法。使其可以在this.state.hideCompleted
为true
时,过滤我们已完成的任务。
现在,如果你确认了任务已完成,任务列表中将会只显示那些没有被完成的任务。
再来个特性:显示未完成任务的数量
我们已经编写了语句来过滤已完成的任务,我们也可以使用相同的语句去展示没有被确认完成的任务的数量。要完成这个特性,我们要从getMeteorData
的方法中获取总数,然后再render
方法中添加一行。因为我们已经有数据在客户端的MiniMongo里了,所以添加额外的总数并不会向服务器再次申请数据。