我想在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> );};
如何從 React-Router-Dom 停止對 Link 元素的傳播?
慕容森
2022-10-27 15:39:18