在 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

  }
});

在 React 组件中调用 Meteor 方法

Calling Meteor methods in React components

meteor

reactjs

meteor-react