2

目前我正在开发一个基于 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包一起工作之前所写的那样,问题是我应该如何首先在服务器上获取这些数据,然后将其传递给客户端使用方法(控制台也没有给出任何警告,并且在我提交表单后,页面重新加载)?我已经在网上看到了一些教程和文章,但没有找到决定,希望在这里得到帮助。

4

1 回答 1

5

您可以将数据作为参数添加到 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 方法中:

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

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

    return Added

  }
});
于 2016-03-14T01:08:52.393 回答