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