本文源代码可以在这里找到

如果你有成为全栈的梦想，METEOR是个不错的平台。

7.在组件状态中存储临时的用户界面数据

在这一章节，我们将在app中添加客户端数据过滤功能，以便用户选择只查看未完成的任务。我们将学习怎样使用React的component state去存储只在客户端用到的临时数据。

首先，我们需要增加一个复选框到App组件：

  1. //imports/ui/App.jsx
  3. <header>
  4.   <h1>Todo List</h1>
  5. //新添加内容
  6.   <label className="hide-completed">
  7.     <input
  8.       type="checkbox"
  9.       readOnly
  10.       checked={this.state.hideCompleted}
  11.       onClick={this.toggleHideCompleted.bind(this)}
  12.     />
  13.     Hide Completed Tasks
  14.   </label>
  15. //新添加内容

你可以看到它从this.state.hideCompleted读取数据。React有一个特殊的字段叫state，你可以把组件数据存储和封装在里面。我们需要在组件的构造器中初始化this.state.hideCompleted的值：

  1. //imports/ui/App.jsx
  3. class App extends Component {
  4.   //新添加的内容
  5.   constructor(props) {
  6.     super(props);
  8.     this.state = {
  9.       hideCompleted: false,
  10.     };
  11.   }
  12.   //新添加的内容
  13. }

我们可以事件管理器中调用this.setState去更新this.state，这将异步更新state属性，并重新渲染组件：

  1. //imports/ui/App.jsx
  3.     ReactDOM.findDOMNode(this.refs.textInput).value = '';
  4.   }
  5.   //新添加的内容
  6.   toggleHideCompleted() {
  7.     this.setState({
  8.       hideCompleted: !this.state.hideCompleted,
  9.     });
  10.   }
  11. //新添加的内容
  12. }

当this.state.hideCompleted为true时，我们需要更新renderTasks方法去过滤已经完成的任务：

  1. //imports/ui/App.jsx
  3. renderTasks() {
  4.   let filteredTasks = this.props.tasks;
  5.   if (this.state.hideCompleted) {
  6.     filteredTasks = filteredTasks.filter(task => !task.checked);
  7.   }
  8.   return filteredTasks.map((task) => (
  9.     <Task key={task._id} task={task} />
  10.   ));
  11. }

如果你现在选择复选框，任务列表不会再展现已经完成的任务了。

新的特性：显示未完成任务的数目

现在我们要写一个查询条件，用来过滤掉已经完成的任务。我们也可以用相同的查询来显示已完成的任务总数。为此，我们需要在我们的数据容器中拿到一个计数，并在render方法中添加一行代码。因为我们已经有客户端集合中的数据，增加这个额外的计数不需要向服务端发起任何请求。

  1. //imports/ui/App.jsx
  3. export default createContainer(() => {
  4.   return {
  5.     tasks: Tasks.find({}, { sort: { createdAt: -1 } }).fetch(),
  6.     //新添加的的内容
  7.     incompleteCount: Tasks.find({ checked: { $ne: true } }).count(),
  8.     //新添加的的内容
  9.   };
  10. }, App);
  1. //imports/ui/App.jsx
  3. return (
  4.   <div className="container">
  5.     <header>
  6.       //新添加的的内容
  7.       <h1>Todo List ({this.props.incompleteCount})</h1>
  8.       //新添加的的内容
  9.       <label className="hide-completed">
  10.         <input
  11. //...省略一些代码...
  13. App.propTypes = {
  14.   tasks: PropTypes.array.isRequired,
  15.   //新添加的的内容
  16.   incompleteCount: PropTypes.number.isRequired,
  17.   //新添加的的内容
  18. };
  19. )

上一节：Running on mobile(在移动端运行)

下一节：Adding user accounts(添加用户账号)待翻译