确认完成和删除使命
到如今为止,我们只要一个和鸠合互动的要领 — 在文档中举行插进去操纵。
如今,我们来进修怎样举行更新和删除操纵。
先来给task
组件增加两个元素: 一个确认选框和一个删除按钮,并给他们带上各自的事宜监听
在Task.jsx
中写入下面的内容
// Task component - represents a single todo item
Task = React.createClass({
propTypes: {
task: React.PropTypes.object.isRequired
},
// 增加内容最先
toggleChecked() {
// 当按下按钮时,设定确认值为当前的相反值
Tasks.update(this.props.task._id, {
$set: {checked: ! this.props.task.checked}
});
},
deleteThisTask() {
Tasks.remove(this.props.task._id);
},
// 增加内容完毕
render() {
// 增加下面一行的内容
// 当使命被完成的时刻给它们一个差别的class
// 如许,经由过程CSS中的设置后,它们会看起来更好一些。
const taskClassName = this.props.task.checked ? "checked" : "";
return (
// 增加内容最先
<li className={taskClassName}>
<button className="delete" onClick={this.deleteThisTask}>
×
</button>
<input
type="checkbox"
readOnly={true}
checked={this.props.task.checked}
onClick={this.toggleChecked} />
<span className="text">{this.props.task.text}</span>
</li>
//增加内容完毕
);
}
});
更新
在上面的代码中,我们在确认属性被转变的时刻调用了Tasks.update
要领。
这个在鸠合中的update
函数须要两个参数,第一个参数是一个选择器,一个鸠合中子集的身份证,第二个参数是指定更新数据,在匹配到的子集里要干点儿什么
在这个部份,选择器就是本使命的_id
,更新数据的参数就是运用$set
去切换checked
的值,它代表着此使命是不是被完成了。
删除
在上面的代码中运用了Tasks.remove
来删除使命。这个remove
函数须要一个参数,一个肯定鸠合中谁人子项应该被被删除的身份证号码。