确认完成和删除任务
到现在为止,我们只有一个和集合互动的方法 -- 在文档中进行插入操作。
现在,我们来学习如何进行更新和删除操作。
先来给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
函数需要一个参数,一个确定集合中那个子项应该被被删除的身份证号码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。