javascript - React JS onClick 事件在标签内

Question

我有这段代码，它是一个带有 onClick 的标签。里面的事件。我的问题是，当我单击浏览器中的 div 时，会触发 href 并且我正在访问另一个站点。有没有办法确保只有 onClick is triggered when clicking on chnage订单 onClick` 并且当单击 a 标记的其余部分时链接是否有效？

  <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 >

Answer 1

尝试:

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