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方法中使用check函数。

使用Meteor输入复选框

1 个答案: