使用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);

它应该是complete而不是copmlete。为了避免将来发生类似的错误，您可以在Meteor方法中使用检查函数。