Question

这是我的代码。

<button type="button" className="btn btn-outline-secondary" onClick={this.addToCart.bind(
    this,
    this.state.itemDetails.product.images[0].path,
    this.state.itemDetails.name,
    this.state.itemDetails.id,
    this.state.itemDetails.unitPrice,
    this.state.quantity
)} >
    <Link to="/proceedToCheckout">
    Buy Now
    </Link>
</button>

在这里，我想将事件称为onClick，然后单击该按钮时，我要将页面定向到链接“ / proceedToCheckout”。我想通过单击一个按钮来完成这两个操作。在上面的代码中，当我单击按钮区域时，它将调用addToCart函数。但是路线不起作用。如果我单击“立即购买”（链接）一词，则它指向路线。但是我要做的就是单击一个按钮，我需要调用函数“ addToCart”，然后将其定向到路由“ / proceedToCheckout”

Answer 1

尝试

return <Redirect to='/proceedToCheckout'/>;

代替

<Link to="/proceedToCheckout">Buy Now</Link>

请从您的路由器库中导入重定向。

Answer 2

根据您的代码，我做了一些更改：

<button type="button" className="btn btn-outline-secondary" onClick={this.addToCart.bind(
this,
this.state.itemDetails.product.images[0].path,
this.state.itemDetails.name,
this.state.itemDetails.id,
this.state.itemDetails.unitPrice,
this.state.quantity )} >

Buy Now </button>

在“ addToCart”功能中，我添加了要实现的路由

addToCart= () => {
   .... // what you want to achieve in this function
   ....
   this.props.history.push('/proceedToCheckout');

}

Answer 3

<button onClick={() => this.props.history.push('/proceedToCheckout')}>Buy Now</button>

单击按钮时如何调用函数然后导航至路线？

3 个答案: