Javascript 使用Meteor并输入复选框

你好，我有一个问题，我的复选框保持检查时，我检查他们。所以我想做的是在我点击这个框的时候勾选和取消勾选。但一旦我检查了它，它就会被卡在支票上，我再也不能对它做任何事情了。这里是相关代码

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

这是主包装

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

从“React”导入React；
从“react dom”导入react dom；
从“meteor/ultimatejs:tracker react”导入TrackerReact；
从“/ResolutionsForm.jsx”导入ResolutionsForm；
从“/ResolutionSingle.jsx”导入ResolutionSingle；
决议=新的Mongo.集合（“决议”）；
导出默认类ResolutionsWrapper扩展TrackerReact（React.Component）{
构造函数（）{
超级（）；
此.state={
订阅：{
决议：Meteor.subscribe（“所有决议”）
}
}
}
组件将卸载（）{
this.state.subscription.resolutions.stop（）；
}
决议（）{
返回解析。find（）.fetch（）；
}
render（）{
返回(
我的决心

{this.resolutions（）.map（（分辨率）=>{
返回
})}

)
}
}

您的代码中有一个输入错误

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

---

它应该是

complete

而不是

copmlete

。为了避免将来出现类似的错误，您可以在Meteor方法中使用函数。

Hm，这看起来还可以。请包括道具传递到

ResolutionSingle

的代码。我添加了使用ResolutionSingle的主包装器！我很确定我和我正在看的图坦卡蒙的代码是一样的。他在linux上做这件事，我在windows上做这件事，并不是说这件事会有所不同。当我检查支票时，我的支票只是保持检查状态。或者该值保持为真，而不是切换。您是救世主！太棒了，我会记住的！

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