流星反应-autoform没有显示任何东西

时间:2016-07-14 02:25:34

标签: javascript meteor meteor-autoform meteor-react

我这几周一直在努力。 我想在我的网页中使用meteor-react-autoform。 我正在使用The Meteor Chef的Base。 任何帮助都非常感谢

抱歉英文不好,这是文件。

这是我定义架构和集合的文件:

import { Mongo } from 'meteor/mongo';
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
import { Factory } from 'meteor/dburles:factory';

export const Documents = new Mongo.Collection('Documents');

// Documentation -> https://github.com/MechJosh0/meteor-react-autoform
// Extend the schema to allow our materialForm object
SimpleSchema.extendOptions({
    materialForm: Match.Optional(Object)
});


Documents.allow({
  insert: () => false,
  update: () => false,
  remove: () => false
});

Documents.deny({
  insert: () => true,
  update: () => true,
  remove: () => true
});

Documents.schema = new SimpleSchema({
  title: {
    type: String,
      materialForm: {
          floatingLabelText: 'Your name',
          hintText: 'Sarah Smith...'
    }
  }
});

Documents.attachSchema(Documents.schema);

这是表单和插入处理程序

import React from 'react';
import { Bert } from 'meteor/themeteorchef:bert';
import { insertDocument } from '../../api/documents/methods.js';
import ReactAutoForm from 'meteor-react-autoform';
import { Documents } from '../../api/documents/documents';


const handleInsertDocument = (event) => {
  const target = event.target;
  const title = target.value.trim();

  if (title !== '' && event.keyCode === 13) {
    insertDocument.call({
      title
    }, (error) => {
      if (error) {
        Bert.alert(error.reason, 'danger');
      } else {
        target.value = '';
        Bert.alert('Document added!', 'success');
      }
    });
  }
};


export const AddDocument = () => (
    <ReactAutoForm
        muiTheme={true}
        onSubmit={handleInsertDocument}
        schema={Documents.schema}
        type="insert"
    />
);

这是定义方法的文件:

import { Documents } from './documents';
import { SimpleSchema } from 'meteor/aldeed:simple-schema';
import { ValidatedMethod } from 'meteor/mdg:validated-method';

export const insertDocument = new ValidatedMethod({
  name: 'documents.insert',
  validate: new SimpleSchema({
    title: { type: String }
  }).validator(),
  run(document) {
    Documents.insert(document);
  }
});

export const updateDocument = new ValidatedMethod({
  name: 'documents.update',
  validate: new SimpleSchema({
    _id: { type: String },
    'update.title': { type: String, optional: true }
  }).validator(),
  run({ _id, update }) {
    Documents.update(_id, { $set: update });
  }
});

export const removeDocument = new ValidatedMethod({
  name: 'documents.remove',
  validate: new SimpleSchema({
    _id: { type: String }
  }).validator(),
  run({ _id }) {
    Documents.remove(_id);
  }
});

1 个答案:

答案 0 :(得分:0)

您的集合和架构需要在不同的文件中单独定义。将架构移动到新文件中,将架构导入集合文件并通过SimeplSchema传输并存储为集合。然后在react文件中导入模式文件,而不是集合文件。

示例可以在the readme file上找到。

如果你仍然遇到问题,我建议在Github上创建一个项目,你可以分享你在哪里重现问题,在meteor-react-autoform项目上提交一个问题我将提交一个拉动请求,其中包含更改让你的项目有效。