使用流星输入复选框

你好，我检查他们时，我的复选框的入住问题有问题。所以我希望能够做的是检查并取消选中，因为我点击框。但是一旦我检查了它，它就会被卡住，我再也无法做任何事情了。这是相关的代码！使用流星输入复选框

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

来源

2016-05-23 tdog

嗯，这看起来不错。请包括代码在何处传递给'ResolutionSingle'。 – aedm

我添加了使用ResolutionSingle的主包装器！我很确定我有和我正在观看的tut一样的代码。他在linux上这样做，我在Windows上做，而不是它应该在这里有所作为。当我检查他们时，我的支票只是保持检查。或者值保持不变而不是切换。 – tdog

你有一个错字在你的代码。

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

应该complete而不是copmlete。为了避免将来出现这样的错误，您可以在Meteor方法中使用check函数。

来源

2016-05-23 20:51:49 aedm

你是救世主！真棒，我会牢记这一点！ – tdog

使用流星输入复选框

回答

相关问题