2

Есть ли возможность сделать meteor-autoform Работает с meteor-collection2-core и react-meteor?Автоформ с метеорным реактивом и простой схемой

MWE

Предпочтительно я хотел бы иметь что-то вроде этого.

./imports/api/Books.js

import { Mongo } from 'meteor/mongo'; 
import SimpleSchema from 'simpl-schema'; 
const Books = new Mongo.Collection("books"); 
Books.attachSchema(new SimpleSchema({ 
    title: { 
     type: String, 
     label: "Title", 
     max: 200 
    }, 
     author: { 
     type: String, 
     label: "Author" 
    }, 
})); 
if (Meteor.isServer) { 
    Meteor.publish('allBooks', function() { 
     return Books.find({},); 
    }); 
}; 
export default Books; 

./imports/client/NewBooks.js

import React, { Component, PropTypes } from 'react'; 
import { createContainer } from 'meteor/react-meteor-data'; 
import { quickForm } from 'meteor-autoform'; 
import Books from '../api/Books'; 
class NewBooks extends Component { 
    constructor(props) { 
    super(props) 
    this.state = {} 
    } 

    render() { 
    return (
     <div className="container"> 
     <quickForm 
      collection={Books} 
      id="insertBookForm" 
      type="insert"> 
     </quickForm> 
     </div> 
    ) 
    } 
}; 
export default createContainer(() => { 
    Meteor.subscribe('allBooks'); 
    return { 
    books: Books.find().fetch() 
    } 
}, NewBooks); 

ответ

2

Насколько мне известно, Автоформа сильно зависит от Blaze, поэтому вы можете либо использовать компоненты автоматической форматирования в реакции (см. here), либо вы можете использовать для этого другую библиотеку. Я использовал это в недавнем проекте: github.com/nicolaslopezj/simple-react-form. Это мощный, но гораздо более «практический», чем волшебный «Autoform» (вы должны написать свои собственные компоненты формы и поля).

3

Пакет npm Uniforms работал очень легко с Bootstrap.

Дополнение к ./imports/client/NewBooks.js

import AutoForm from 'uniforms-unstyled/AutoForm'; 
... 
<AutoForm 
    schema={Books._collection.simpleSchema()} 
    onSubmit={doc => console.log(doc)} 
/> 
+0

Привет! В моем случае у меня была моя модель с именем ** devices **, загруженная через ** createContainer ** и ** Meteor.subscribe **, поэтому добавление ** model ** prop, подобный этому ** model = {device} **, преобразовал форма с заполненными данными из модели! ' console.log (DOC)} модель = {устройство} />' – razor7

+0

форменная выглядит многообещающим! – pihyper

Смежные вопросы