从函数提交POST表单

Question

我有一个表单，当一个函数在表单外被调用时，我想提交(POST(，但没有按钮(它与按钮一起工作(。

我试过使用这个：document.getElementById('liked').submit();

但它只是把这个粘贴到url中：http://localhost:3000/?postId=108&userId=1

我试着把method="post"放在表单标签中，但它说"不能张贴">

这篇文章是用Axios完成的。

除此之外，我希望它不要重新加载页面/组件

这是我的表格：

<form id="liked" name="liked" onSubmit={handlePost}>
<input hidden name="postId" id="postId" value={product.id} />
<input hidden name="userId" id="userId" value={currentUser.id} />
</form>;

这是我调用Axios post函数的回调：

const handlePost = useCallback((event) => {
event.preventDefault();
context.postBookmark(event.target);
});

这就是我希望提交表格的地方：

const onSwipe = (direction) => {
if (direction == "right") {
// SUBMIT HERE
document.getElementById("liked").submit();
}
}

Answer 1

当您调用表单的submit()方法时，它会直接提交表单。

它不会触发submit事件。将不会调用提交处理程序。preventDefault将不会被调用。context.postBookmark将不会被调用。

如果您想从表单外调用context.postBookmark，那么直接执行即可，无需开始常规表单提交。

context.postBookmark(document.getElementById("liked"));

---

旁白：不建议使用React直接访问DOM。相反，使用引用或(更好(将数据存储在状态中并从中读取(。