阻止默认按钮操作 在 反应.

Question

>我有一个问题。这可能是一件容易的事，但我试图过度思考这一点。 我有这样的情况：

<Button
className={favorites ? styles.active : styles.outlines}
onClick={() => addToFavorites({ id })}
variant='outline'
>

此按钮将产品添加为收藏夹。但是我想防止页面滚动。 addToFavorites({ id }( 是从 props 传递的。 我可以做这样的事情吗：

const addFav = e => {
e.preventDefault();
};

然后

<Button
className={favorites ? styles.active : styles.outlines}
onClick={e => addToFavorites({ id }, addFav(e))}
variant='outline'
>

现在它正在工作，但不确定这是否是有效的解决方案

Answer 1

彼此的方式。

<Button className={favorites ? styles.active : styles.outlines} onClick={e => addFav(e,{id}))} variant='outline'>
const addFav = (e,id) => {
e.preventDefault();
addToFavorites(id);
};

Answer 2

您不需要将addFav(e)作为参数传递给addToFavorites。只需在addToFavorites之后直接调用它：

<Button
className={favorites ? styles.active : styles.outlines}
onClick={e => (addToFavorites({ id }), addFav(e))}
variant='outline'
>