在组件状况中存储暂时数据

在这个步骤，我们会在为运用的客户端增加数据过滤特征，如许用户就能够经由过程点击’确认选框‘来检察当前举行的使命。我们会去进修怎样仅在客户端运用React组件状况来存储暂时模板

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

<!-- 在App.jsx 文件中 -->
<header>
  <h1>Todo List</h1>

    <!-- 最先增加内容 -->
  <label className="hide-completed">
    <input
      type="checkbox"
      readOnly={true}
      checked={this.state.hideCompleted}
      onClick={this.toggleHideCompleted} />
    Hide Completed Tasks
  </label>
    <!-- 完毕增加内容 -->

  <form className="new-task" onSubmit={this.handleSubmit} >
    <input
      type="text"

你能够看到要在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 (
    <div className="container">

如今我们得更新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 (
  <div className="container">
    <header>

        // 修正最先
      <h1>Todo List ({this.data.incompleteCount})</h1>
            // 修正完毕

      <label className="hide-completed">
        <input