如何在 ReactJS 中单击按钮

Question

我有以下问题，在我的 web 网站构建中，使用 nextJS 和 ReactJS 使用 typescript 我有产品被加载，当单击按钮时出现询问行为，当我单击按钮并向下滚动按钮时，该按钮是但是当我滚动到页面底部并尝试单击按钮时，滚动保持在相同的 position 并且项目已加载但看不到，我的逻辑是在当前按钮上使用 onFocus 并且当我单击它时将滚动更改为他，这将解决用户向下滚动到页面底部时的问题，这样它就不会留在底部，而是会自动向上滚动到按钮并会看到加载的新项目.

问题是加载产品的逻辑位于不同的组件中，我在其中重用当前按钮和正确的道具，我将 function 发送到按钮上的 onClick。 我的问题是如何使用 onFocus。 它必须在 function 内的子组件中还是在按钮组件中。 我试图让它在 Button 组件上工作，但它不起作用。 所以我在过去的 4 个小时里被困住了，我真的需要推动。 如果你能放大一点我会很高兴

这里我将在 onClick prop 的父组件中输入 function：

const handleLoadMoreProducts = () => {
    if (!isSearchPage) {
      const mappedBreadcrumbs: string[] = categoryData.breadcrumbs.map(
        (crumb: BreadCrumItem) => crumb.name
      );
      gtmBreadcrumbTrack(mappedBreadcrumbs);
    }

 <LoadMoreProducts handleLoadMoreProducts={handleLoadMoreProducts} />

这是使用 Button 的组件：

interface LoadMoreProductsProps {
  handleLoadMoreProducts?: (MouseEvent: React.MouseEvent<HTMLButtonElement>) => void;
  Focus?: (MouseEvent: React.MouseEvent<HTMLButtonElement>) => void;
}

const LoadMoreProducts: FC<LoadMoreProductsProps> = ({ handleLoadMoreProducts }) => (
  <div className="LoadMoreProducts">
    <Button type="button" importance="ghost" onClick={handleLoadMoreProducts}>
      Load more products
    </Button>
  </div>
);

Answer 1

我认为您想要做的是使用React.forwardRef转发您尝试在 Button 组件中关注的元素的引用，并将其与useImperativeHandle钩子结合起来，以获得使用外部引用触发焦点的能力按钮组件。

您可以为您尝试聚焦的元素创建一个引用，并调用focus() function 以获得单击时的引用。

有关转发 refs和useImperativeHandle钩子的更多信息。