使用 React 功能组件自动聚焦 Reactstrap 警报

Question

我正在为我的前端设计使用 React Hooks，在创建注册表单时我使用了各种验证，并且我正在使用 Reactstrap 警告警报来描述错误。一切正常，但当焦点未在这些警报上实现时，意味着当我的页面显示任何警报时，它不会自动关注该警报。

我已经尝试了自动对焦/autoFocus 或 Focus() 的基本代码，但没有任何效果符合需要。我的警报代码如下所示：

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

我只是在我的表单输入之间编写这些警报代码，每当我需要调用它们中的任何一个时，我只需为组件设置值并调用警报框，但它仍然缺乏自动对焦。

如有任何帮助，我们将不胜感激。提前致谢！

Answer 1

我找到了所需的解决方案，因为我希望我的页面自动聚焦于出现的警告框。我搜索了 react-hooks 官方文档，了解到我们可以使用 "useRef" 来达到目的，下面是我的代码，以便更好地理解和澄清：

首先：从 react 导入 useRef。

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

第二步：使用 useRef 作为 null 创建具有所需名称的常量。

const inputUser = useRef(null);

第三：在警报后将焦点放在您的引用常量上。

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

第四步：将 ref 作为您在输入字段中在步骤 2 中定义的常量传递。

    ref= {inputUser}

使用 React 功能组件自动聚焦 Reactstrap 警报

Autofocus on reactstrap alerts using react functional component

alert

reactjs

reactstrap

react-hooks