javascript - 使用 Meteor 并输入复选框

Question

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

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>
    )
  }
}

Answer 1

您的代码中有一个拼写错误。

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

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