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

  }
});

在React组件中调用Meteor方法

1 个答案: