转载

翻译 Meteor React 制作 Todos - 05 - 更新删除

确认完成和删除任务

到现在为止，我们只有一个和集合互动的方法 -- 在文档中进行插入操作。现在，我们来学习如何进行更新和删除操作。

先来给 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>       //添加内容结束      );   } });