我正在制作一个小应用程序(一个主题列表),我使用复选框删除一些主题,但当我启动应用程序时,控制台说“无法读取属性'已检查'未定义”我在一些帖子上看到它可能是因为我重写了复选框bur我看不到哪里。
你可以帮忙吗?
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Topics } from '../api/topic.js';
import Topic from './Topic.jsx';
class AppTopic extends Component {
toggleChecked() {
// Set the checked property to the opposite of its current value
Topics.update(this.props.topic._id, {
$set: { checked: !this.props.topic.checked },
});
}
deleteThisTopic() {
Topics.remove(this.props.topic._id);
}
renderTopics() {
return this.props.topics.map((topic) => (
<Topic key={topic._id} topic={topic} />
));
}
render() {
// Give tasks a different className when they are checked off,
// so that we can style them nicely in CSS
const topicClassName = this.props.topic.checked ? 'checked' : '';
return (
<li className={topicClassName}>
<button className="delete" onClick={this.deleteThisTopic.bind(this)}>
×
</button>
<input
type="checkbox"
readOnly
checked={this.props.topic.checked}
onClick={this.toggleChecked.bind(this)}
/>
<span className="text">{this.renderTopics()}</span>
</li>
);
}
}
AppTopic.propTypes = {
topics: PropTypes.array.isRequired
};
export default createContainer(() => {
return {
topics: Topics.find({}).fetch(),
};
}, AppTopic);
答案 0 :(得分:0)
这里是../ api / topic.js
import { Mongo } from 'meteor/mongo';
export const Topics = new Mongo.Collection('topics');
&#13;
和./Topic.jsx
import React, { Component, PropTypes } from 'react';
import { Topics } from '../api/topic.js';
export default class Topic extends Component {
render() {
return (
<div>
<li>{this.props.topic.text} ARN: {this.props.topic.arn} <button>S'inscrire</button></li>
</div>
);
}
}
Topic.propTypes = {
topic: PropTypes.object.isRequired,
};
&#13;