亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何從 React-Router-Dom 停止對 Link 元素的傳播?

如何從 React-Router-Dom 停止對 Link 元素的傳播?

慕容森 2022-10-27 15:39:18
我想在LinkReact-Router-Dom 的組件內的事件對象上觸發停止傳播方法。我的問題是,當我單擊Link元素內的按鈕時,它無論如何都會將我移動到另一個頁面。我看到 stopPropagation 方法無法正常工作,并且Link元素上的 onClick 事件正在啟動。如何防止這種行為?我在 codeSandbox 上準備了一個示例,但在此示例中,Link并沒有將我移動到另一個頁面,而只是刷新了頁面。示例 https://codesandbox.io/s/serene-surf-h65dz?file=/src/Home.js我的代碼:const handleClick = e => {  e.stopPropagation();  return console.log("Works?");};return (  <Link to={`/edytuj/${item.ID}`} className="table__row">    <Checkbox      isSelected={isSelected}      toggleSelection={() => handleSelection(item, isSelected)}    ></Checkbox>    <TableRowItem>{item.ID}</TableRowItem>    <TableRowItem      src={item.IMAGE}      additionalClassName="table__image"    ></TableRowItem>    <TableRowItem>{item.NAME}</TableRowItem>    <TableRowItem>{item.DESCRIPTION}</TableRowItem>    <TableRowItem additionalClassName="table__cost">      {item.COST} z?    </TableRowItem>    <TableRowItem additionalClassName="table__buttons">      <Button className="btn btn__edit" icon="fas fa-pen btn__icon">        Edytuj      </Button>      <Button        onClick={e => handleClick(e)}        className="btn btn__delete"        icon="fas fa-times btn__icon"      >        Usuń      </Button>    </TableRowItem>  </Link>);按鈕:const Button = ({ className, icon, children, onClick }) => {  return (    <button onClick={onClick} className={className}>      {children}      {icon && <i className={icon}></i>}    </button>  );};
查看完整描述

1 回答

?
忽然笑

TA貢獻1806條經驗 獲得超5個贊

只需使用 e.preventDefault();


const handleClick = (e) => {

    e.preventDefault();

    return console.log("It works");

  };

https://codesandbox.io/s/small-bird-65zgb?file=/src/Home.js


查看完整回答
反對 回復 2022-10-27
  • 1 回答
  • 0 關注
  • 103 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號