使用react功能組件自動關注reactstrap警報

Question

我在前端設計中使用react掛鈎，並且在創建注冊表時使用了各種驗證，並使用reactstrap警告警報描述了錯誤。 一切運行正常，但是如果未將重點放在這些警報上，則意味着當我的頁面顯示任何警報時，它不會自動關注該警報。

我已經嘗試過自動對焦/ autoFocus或Focus（）的基本代碼，但是沒有任何根據需要工作的代碼。 我的警報代碼如下所示：

  {
        showAlreadyRegisteredAlert?
        <Alert variant="warning" onClose={() => setShowAlreadyRegisteredAlert(false)} dismissible>
        <p className="mb-0">
        {content}
        </p>
      </Alert>
        :null
      }

我只是在表單輸入之間編寫這些警報代碼，並且每當我需要調用它們中的任何一個時，我都只是為組件和警報框設置了setValue，但仍然缺少自動聚焦。

任何幫助將不勝感激。 提前致謝！

Answer 1

我找到了所需的解決方案，因為我希望我的頁面應自動專注於出現的警報框。 我搜索了react-hooks的官方文檔，並知道我們可以為此目的使用“ useRef”，以下是我的代碼，可以更好地理解和說明：

首先：從react導入useRef。

import React, {useState, useRef} from "react";

第二：使用useRef作為null創建具有所需名稱的const。

const inputUser = useRef(null);

第三：警報后將焦點放在您的ref const上。

setShowAlreadyRegisteredAlert(true);
inputUser.current.focus();

第四：將ref作為您在輸入字段中的第2步中定義的const傳遞。

    ref= {inputUser}