时间戳

首页 > 解决方案 > React：单击时如何防止按钮（从 react-scroll 导入）滚动

javascript - React：单击时如何防止按钮（从 react-scroll 导入）滚动

问题描述

我react-scroll用来在单击组件后获得平滑的滚动效果。

问题是，当我在组件内部添加一个按钮时，为了能够制作收藏列表，点击这个按钮后，也会出现平滑滚动效果（这是可以理解的）。

我的问题是，我怎样才能防止这种行为？

简短的样机：

import React from "react";
import { Link } from "react-scroll";

import iconSprites from "../images/sprite.svg";

const App = () => {
    const handleClickFavorite = () => {
        console.log("favorite clicked!");
    };

    return (
        <Link
            activeClass="active"
            to="test-destination"
            smooth={true}
            spy={true}
            duration={500}
            className="App-Link"
        >
            <div className="App-item">
                <img
                    className="App-item__img"
                    src={exampleSRC}
                    alt="img"
                />

                <div className="App-item__text">
                    <p>Lorem ipsum</p>
                </div>

                <button
                    onClick={handleClickFavorite}
                    className="App-item__btn--favorite"
                >
                    <svg className="App-item__icon--favorite">
                        <use href={iconSprites + "#icon-star"} />
                    </svg>
                </button>
            </div>
        </Link>
    );
};

export default App;

我已经尝试在 css 中使用overflow: hidden;in.App-item__btn--favorite但它不起作用并且还隐藏了我的图标（我也理解 - 它隐藏了按钮的子项）。

欢迎任何想法。

编辑：如下所示，我将按钮作为其余按钮的兄弟，但在内部，App-item以便我可以更好地定位 id。之后我添加了一个额外的，现在它正在工作。解决方案下方：

return (
<div className="App-item">
        <Link
            activeClass="active"
            to="test-destination"
            smooth={true}
            spy={true}
            duration={500}
            className="App-Link"
        >
            <div className="App-item__container">
                <img
                    className="App-item__img"
                    src={exampleSRC}
                    alt="img"
                />

                <div className="App-item__text">
                    <p>Lorem ipsum</p>
                </div>
            </div>
          </Link>
                <button
                    onClick={handleClickFavorite}
                    className="App-item__btn--favorite"
                >
                    <svg className="App-item__icon--favorite">
                        <use href={iconSprites + "#icon-star"} />
                    </svg>
                </button>
           </div>
    );
};

标签： javascripthtmlcssreactjs

解决方案

由于按钮是使用 Link 组件包装的元素的子元素，因此 Link 功能扩展到它。

在我的脑海中，有两个解决方案是：

  1. 将 div 和 button 元素设为兄弟元素，用 css 将它们放在一起。这样，您可以将 div 包装在 Link 组件中，而无需包装按钮。

  2. 在按钮上使用 onClick 处理程序并 preventDefault() 来阻止从 div 继承的功能发生（不确定这个是否有效，必须尝试一下，看看它是否真的能完成这项工作）。

推荐阅读