亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React Router - OnClick 不在 Navlink 中處理

React Router - OnClick 不在 Navlink 中處理

慕沐林林 2022-05-26 17:35:36
在底部,在 NavLink 標記中,onClick 不起作用,我只被重定向到另一個頁面但它不處理 submitHandler 函數如果我刪除 NavLink,則 submitHandler 進程,但每當我添加 React Router 標簽時,什么都不會觸發我刪除了大部分代碼,因為我的問題并不重要class XXX extends React.Component {  constructor() {    super();    this.state = {      username: "",      password: "",      users: [],      errors: []    };  }  submitHandler = event => {    event.preventDefault();    let check = true;    if (this.state.username == "") {      this.showValidationErr("username", "Username cannot be empty !");      check = false;    }    if (this.state.password == "") {      this.showValidationErr("password", "Password cannot be empty !");      check = false;    }    if (this.state.users.indexOf(this.state.username) != -1) {      this.showValidationErr("username", "Username already exists !");      check = false;    }    if (check) {      axios        .post("https://localhost:44314/api/Users", this.state)        .then(response => {          console.log(response);        })        .catch(error => {          console.log(error);        });    }  };  render() {    return (      <div className="App">        <form onSubmit={this.submitHandler}>          <button type="Submit">            <NavLink to="/newsfeed" onClick={() => this.submitHandler}>              Create Account            </NavLink>          </button>        </form>      </div>    );  }}
查看完整描述

1 回答

?
蝴蝶不菲

TA貢獻1810條經驗 獲得超4個贊

這里不需要 NavLink,只需使用按鈕,單擊將調用表單上使用的函數。


<form onSubmit={this.submitHandler}> <button type="Submit" />Create Account</button> </form>

如果要重定向,可以在submitHandler函數中進行。


submitHandler = (event) => {

event.preventDefault();

// Your logic

this.props.history.push("newsfeed");

當您使用 withRouter HOF 包裝您的組件時,該history道具將可用。


import { withRouter } from 'react-router-dom';


export default withRouter(YourComponent);


查看完整回答
反對 回復 2022-05-26
  • 1 回答
  • 0 關注
  • 165 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號