如何在 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鈎子的更多信息。