簡體   English   中英

使用Meteor React和Simple-Schema自動化

[英]Autoform with Meteor React and Simple-Schema

是否有可能使meteor-autoformmeteor-collection2-core反應流星一起工作

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);

npm包Uniforms使用Bootstrap非常容易。

除了./imports/client/NewBooks.js

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

據我所知,Autoform在很大程度上依賴於Blaze,因此,您可以在反應中使用blaze autoform組件(請參閱此處 ),或者您可以使用不同的庫。 我在最近的一個項目中使用過它: github.com/nicolaslopezj/simple-react-form 它功能強大,但比神奇的Autoform(你必須編寫自己的表格和場組件)更具“動手”。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM