Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

59
Vistas
why onclicking only the onclick function working
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);

Here in the <ActionSection ><Link to={"/cart"}><ViewBagButton onClick={(e)=>{this.props.toggleCart(e)}}>VIEW BAG</ViewBagButton></Link<CheckoutButton>CHECKOUT</CheckoutButton></ActionSection>

I want when i click on view bag it redirect to cart view page it should go to cart page but the onclick function is rendering . i also want that onclick function run but page also redirect please help me how to do it this onClick={(e)=>{this.props.toggleCart(e)}} onclick should run but it also go to the next page

7 months ago · Santiago Gelvez
1 Respuestas
Responde la pregunta

0

Is your App/Component wrapped in react-router? if not don't use Link.

Simple solution i can think of is replace your Link with div and then your onClick function will work and in the end of onClick function code, you can use 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 
   }
7 months ago · Santiago Gelvez Denunciar
Responde la pregunta
Encuentra empleos remotos