Question

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

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-07-22T23:10:01.704Z

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 
   }