我想在 Link
内的事件对象上触发停止传播方法来自 React-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>
);
};
最佳答案
只需使用 e.preventDefault();
const handleClick = (e) => {
e.preventDefault();
return console.log("It works");
};
https://codesandbox.io/s/small-bird-65zgb?file=/src/Home.js
关于javascript - 如何从 React-Router-Dom 停止对 Link 元素的传播?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62696245/