Question

我有一个React组件，其表单具有类似这样的动作：

<center>
    <Form
        action={`/api/sets/`}
        method="post"
        onSubmit={this.onSubmit}>

        <Button color="primary" type="submit">
            Finish
        </Button>
    </Form>
</center >

onSubmit函数如下所示：

onSubmit = (e) => {
    e.preventDefault()
    window.location = "/workout-history";
    e.target.submit()
}

对/api/sets/的操作在单击按钮后发生，并且onSubmit函数确实被调用，但是页面未重定向。在/api/sets的帖子中，我返回了状态204，因此不应确定状态。我猜有可能首先调用该函数，然后调用该动作。关于如何调用表单操作并将页面重定向到其他地方的任何想法？

Answer 1

您可以使用import react-router-dom进行重定向。

option:checked {
  background-color: #216ba5;
  color: #fff;
}

您可以在中查看更多内容： https://medium.com/@anneeb/redirecting-in-react-4de5e517354a

Answer 2

您正在寻找的答案是probably this。

首选使用withRouter HOC并在history.push('/new-location')函数中调用onSubmit。

React JS：在表单上调用操作并重定向到指定页面

2 个答案: