在 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，但我不知道如何正确地将这些数据传递给当前的方法调用。我尝试在不起作用的方法主体中考虑这些数据（我使用了与AddItem 视图中相同的const 设置）。如果我错了，请纠正我，但我认为这种方法不知道我在哪里获取数据（或者我可能并没有真正了解 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 方法中：

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

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

    return Added

  }
});