CODEWITHSUNDEEP
javascripthtmlreactjsonclickatag
user3476614
user3476614

Reputation: 607

React JS onClick event inside a tag

I have this piece of code that is a tag that has a onClick event inside. My problem is that when I click on the div in the browser the href is triggered and I am taking to the other site. Is there a way to make sure so only the onClickis triggered when clicking onchnageOrderonClick` and the link works when clicking the rest of the a tag?

  <div key={idx.toString()}>
    <a className="stage-container" href={stageUrl}>
      <h3>{stage.title}</h3>
      <div className="arrow-container">
        <div
          className=""
          onClick={() =>  
            changeOrder(stage.id, stage.title, stage.order - 1)
          }
        >
          <i className="fa fa-caret-up" />
        </div>
        <div
          onClick={() =>
            changeOrder(stage.id, stage.title, stage.order + 1)
          }
        >
          <i className="fa fa-caret-down" />
        </div>
      </div>
    </a>
    <div className="substages-container">
      {sortSubstages.map((substage, index) => (
        <SubstageItem 
          className="substage-container" 
          key={index.toString()} 
          substage={substage} 
          reload={reload} 
        />
      ))}
    </div>
  </div >

Upvotes: 1

Views: 1231

Answers (2)

Mehdi S
Mehdi S

Reputation: 313

You can use PreventDefault to avoid triggering the href link. You can have a look at https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

HandleChangeOrder = (event,stageid, stagetitle, stageorder) =>{
event.PreventDefault();
//your changeOrder method instructions
}

//Call
<div className="" onClick={() => changeOrder(this.HandleChangeOrder)}>

Upvotes: 0

NewVigilante
NewVigilante

Reputation: 1319

Try:

onClick={(e) => {
    e.preventDefault();
    e.stopPropagation();
    changeOrder(stage.id, stage.title, stage.order - 1);
  }
}

Upvotes: 3

Related Questions