防止reactjs中关于axios错误的默认事件

问题描述

如果axios.post出错，我想防止在反应中打开链接。 我使用了event.preventDefault，但是它并没有阻止单击按钮打开链接。 这是代码

<Link
to={{
  pathname: '/',data: "success",}}
>
<div>
  <Button
    onClick={this.onSubmit}
    variant="contained"
    color="secondary"
  >
    Post
  </Button>
</div>
</Link>
onSubmit=(ev)=>{
   let data = {
          title: this.state.title,content: this.state.content,username: this.state.data.xusername,date: new Date().toUTCString(),};
        Axios.post("http://localhost:9000/posts",data)
          .then((response) => {
            console.log(response);
          })
          .catch((error) => {
            ev.preventDefault();
            console.log(error);
          });
}

解决方法

在链接中嵌套按钮是您的问题。这意味着，当您单击按钮时，这是按钮事件，您可以阻止默认设置。

如果您希望在axios呼叫完成后重定向到另一个页面，则可以使用以下方法：

<Button
  onClick={this.onSubmit}
  variant="contained"
   color="secondary"
>
  Post
</Button>

onSubmit=(ev)=>{
let data = {
      title: this.state.title,content: this.state.content,username: this.state.data.xusername,date: new Date().toUTCString(),};
    Axios.post("http://localhost:9000/posts",data)
      .then((response) => {
        console.log(response);
        window.location.replace("/yourpage?var1=value"); // Redirect with vanilla js.
        this.props.history.push('/yourpage?var1=value&var2=value'); // Redirect with reactjs.
      })
      .catch((error) => {
        console.log(error); // On error,user will experience no change.
      });