翻译 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}>
          &times;
        </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函数须要一个参数,一个肯定鸠合中谁人子项应该被被删除的身份证号码。

    原文作者:AnnatarHe
    原文地址: https://segmentfault.com/a/1190000003852410
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞