在React组件中调用Meteor方法

Question

目前我正在开发一个基于Meteor的项目作为后端,React作为前端.我真的很喜欢简单,直到我删除insecure包并且必须处理Meteor方法.现在我需要执行一个基本的插入操作,我只是被卡住了!我有一个表单作为组件(如果最终我想使用此表单不仅用于插入项目,而且还用于编辑这些项目)这里是我的代码:

AddItemForm = React.createClass({
propTypes: {
    submitAction: React.PropTypes.func.isRequired
 },
getDefaultProps() {
    return {
        submitButtonLabel: "Add Item"
    };
},
render() {
    return (
        <div className="row">
            <form onSubmit={this.submitAction} className="col s12">
                <div className="row">
                    <div className="input-field col s6">
                        <input  
                            id="name"
                            placeholder="What" 
                            type="text" 
                        />
                    </div>
                    <div className="input-field col s6">
                        <input 
                            placeholder="Amount" 
                            id="amount" 
                            type="text" 
                         />
                    </div>
                </div>
                <div className="row">
                    <div className="input-field col s12">
                        <textarea 
                            placeholder="Description" 
                            id="description"
                            className="materialize-textarea">
                        </textarea>
                    </div>
                    </div>
                    <div className="row center">
                        <button className="btn waves-effect waves-light" type="submit">{this.props.submitButtonLabel}</button>
                    </div>
                </form>
            </div>
        );
    }
});

这段代码用作表单组件,我有一个支持submitAction,我用它来说添加视图:

AddItem = React.createClass({
handleSubmit(event) {
    event.preventDefault();
    const 
        name = $('#name').val(),
        amount = $('#amount').val(),
        description = $('#description').val();
        Items.insert(
            {
                name: name,
                range: range,
                description: description,
                createdAt: new Date(),
                ownerId: Meteor.userId()
            },
            function(error) {
                if (error) {
                    console.log("error");
                } else {
                    FlowRouter.go('items');
                };
            }
        );
    },

    render() {
        return (
            <div className="row">
                <h1 className="center">Add Item</h1>
                    <AddItemForm
                        submitButtonLabel="Add Event"
                        submitAction={this.handleSubmit}
                    />
            </div>
        );
    }
}); 

正如你所看到的,我直接通过ID获取值,然后执行insert绝对正确的操作,我甚至可以显示这些数据.所以现在我必须删除insecure包并重建整个操作堆栈methods,我实际上已经停留了.据我所知,我应该做的就是获取相同的数据,然后执行Meteor.call,但我不知道如何正确地将这些数据传递给当前的方法调用.我尝试在方法的正文中考虑这些数据,但这些数据不起作用(我const在AddItem视图中使用了相同的集合).如果我错了,请纠正我,但我不认为这种方法知道我在哪里获取数据(或者我可能没有真正获得Meteor的方法工作流程),所以到目前为止我最终得到的代码是我的插入方法:

Meteor.methods({
    addItem() {
        Items.insert({
            name: name,
            amount: amount,
            description: description,
            createdAt: new Date(),
            ownerId: Meteor.userId()
        });
    }
});

这就是我改变handleSubmit功能的方式:

handleSubmit(event) {
    event.preventDefault();
    const 
        name = $('#name').val(),
        amount = $('#amount').val(),
        description = $('#description').val();
    Meteor.call('addItem');
},

我也尝试声明这样的方法:

'addItem': function() {
    Items.insert({
        // same code
    });
}

但它也不适合我.再次,正如我所理解的那样,问题不是关于数据本身,正如我之前所说的那样,它恰好与insecure包一致,问题是我应该如何在服务器上首先获得这些数据,然后将其传递给客户端使用方法(也是控制台没有提供警告,我提交表单后,页面重新加载)？我已经在网上看过一些教程和文章,并没有找到干扰,希望在这里得到帮助.

Answer 1

您可以在Meteor调用函数中将数据添加为参数.您还可以添加回调函数来检查呼叫是否成功.

handleSubmit(event) {
  event.preventDefault();
  const 
    name = $('#name').val(),
    amount = $('#amount').val(),
    description = $('#description').val();
  Meteor.call('addItem', name, amount, description, function(err, res) {
    if (err){
      console.log(JSON.stringify(err,null,2))
    }else{
      console.log(res, "success!")     
    }
  });
},

在你的流星方法中:

Meteor.methods({
  addItem(name, amount, description) {

    var Added =  Items.insert({
      name: name,
      amount: amount,
      description: description,
      createdAt: new Date(),
      ownerId: Meteor.userId()
    });

    return Added

  }
});