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