import React, { Component } from 'react'; import { OverlayCartContainer,OverlayCartHeader,TotalContainer, ActionSection,ViewBagButton,CheckoutButton,OverlayContainerWrapper,} from './OverlayCartStyle'; import { Link } from 'react-router-dom' import { connect } from 'react-redux'; import { OverlayCartbody } from '../../'; export class OverlayCartWrapperContainer extends Component { constructor(){ super(); this.state={ ref: React.createRef(null), actionRef: React.createRef(null), } } render() { return ( <OverlayContainerWrapper > <OverlayCartContainer ref={this.state.ref}> <OverlayCartHeader> My Bag, <span>{getTotalItem()} items</span> </OverlayCartHeader> <OverlayCartbody cartItem ={this.props.cart}/> <TotalContainer> <p>Total</p> <h6>{this.props.currencySymbol} {getTotalPrice(this.props.currencyState)}</h6> </TotalContainer> <ActionSection > <Link to={"/cart"}><ViewBagButton onClick={(e)=>{this.props.toggleCart(e)}}>VIEW BAG</ViewBagButton></Link> <CheckoutButton>CHECKOUT</CheckoutButton> </ActionSection> </OverlayCartContainer></OverlayContainerWrapper> ) } } const mapStateToProps = (state) =>{ return { currencyState:state.currency.currencyState, currencySymbol:state.currency.currencySymbol, cart:state.cart.cart.cartItems } } export default connect(mapStateToProps)(OverlayCartWrapperContainer); Aquí en <ActionSection ><Link to={"/cart"}><ViewBagButton onClick={(e)=>{this.props.toggleCart(e)}}>VIEW BAG</ViewBagButton></Link<CheckoutButton>CHECKOUT</CheckoutButton></ActionSection>
Quiero que cuando haga clic en ver bolsa, se redirija a la página de vista del carrito, debería ir a la página del carrito, pero la función onclick se está procesando. También quiero que se ejecute la función onclick, pero la página también redirija, ayúdenme a hacerlo. onClick={(e)=>{this.props.toggleCart(e)}} onclick debería ejecutarse pero también ir a la página siguiente
¿Está su aplicación/componente envuelto en el enrutador de reacción? si no, no use Link.
La solución simple que se me ocurre es reemplazar su enlace con div y luego su función onClick funcionará y al final del código de la función onClick, puede usar history.push('/cart')
<div> <ViewBagButton onClick={this.props.toggleCart}> VIEW BAG </ViewBagButton> </div> const toggleCart = (e) => { // your code... // at the end history.push('/cart'); // you can get the history from props or can use useHistory hook }