使用流星輸入複選框

你好，我檢查他們時，我的複選框的入住問題有問題。所以我希望能夠做的是檢查並取消選中，因爲我點擊框。但是一旦我檢查了它，它就會被卡住，我再也無法做任何事情了。這是相關的代碼！使用流星輸入複選框

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

使用流星輸入複選框

回答

相關問題