使用 Meteor 输入复选框答案

【问题标题】：Using Meteor with input of checkbox使用 Meteor 输入复选框
【发布时间】：2016-05-24 05:19:21
【问题描述】：

您好，我在检查复选框时遇到问题。所以我想要做的是在单击框时选中和取消选中。但是一旦我检查它，它就会卡在一张支票上，我不能再对它做任何事情了。这是相关代码！

import React, {Component} from 'react';

export default class ResolutionSingle extends Component {

  toggleChecked() {
    Meteor.call('toggleResolution', this.props.resolution._id, this.props.resolution.copmlete);
  }

  deleteResolution() {
    Meteor.call('deleteResolution', this.props.resolution._id);
  }

  render() {
    return (
      <li>
        <input type="checkbox"
               readOnly={true}
               checked={this.props.resolution.complete}
               onClick={this.toggleChecked.bind(this)} />
        {this.props.resolution.text}
        <button className="btn-cancel"
          onClick={this.deleteResolution.bind(this)}>
          &times;
        </button>
      </li>
    )
  }
}

方法如下

Meteor.methods({
  addResolution(resolution) {
    Resolutions.insert({
      text: resolution,
      complete: false,
      createAt: new Date()
    });
  },
  toggleResolution(id, status) {
    Resolutions.update(id, {
      $set: {complete: !status}
    });
  },
  deleteResolution(id) {
    Resolutions.remove(id);
  }
});

这是主要的包装器

import React from 'react';
import ReactDOM from 'react-dom';
import TrackerReact from 'meteor/ultimatejs:tracker-react';

import ResolutionsForm from './ResolutionsForm.jsx';
import ResolutionSingle from './ResolutionSingle.jsx';


Resolutions = new Mongo.Collection("resolutions");

export default class ResolutionsWrapper extends TrackerReact(React.Component) {
  constructor(){
    super();

    this.state =  {
      subscription: {
        resolutions: Meteor.subscribe("allResolutions")
      }
    }
  }

  componentWillUnmount() {
    this.state.subscription.resolutions.stop();
  }

  resolutions() {
    return Resolutions.find().fetch();
  }

  render(){
    return (
      <div>
        <h1>My Resolutions</h1>
        <ResolutionsForm />
        <ul className="resolutions">
          {this.resolutions().map( (resolution)=>{
            return <ResolutionSingle key={resolution._id} resolution={resolution} />
          })}
        </ul>
      </div>
    )
  }
}

【问题讨论】：

嗯，这看起来不错。请包含将道具传递给ResolutionSingle的代码。
我添加了使用 ResolutionSingle 的主包装器！我很确定我也有与我正在观看的 tut 相同的代码。他在 linux 上执行此操作，而我在 Windows 上执行此操作，并不是说它应该在这里有所作为。当我检查它们时，我的支票会一直保持检查状态。或者该值保持为真而不是切换。

标签： javascript html meteor

【解决方案1】：

您的代码中有错字。

Meteor.call('toggleResolution', this.props.resolution._id, this.props.resolution.copmlete);

应该是complete 而不是copmlete。为了避免以后出现类似错误，您可以在 Meteor 方法中使用 check 函数。

【讨论】：

你是救世主！太棒了，我会记住这一点！