Question

我在我的前端设计中使用了React钩子，并且在创建注册表时，我使用了各种验证方式，并且使用reactstrap警告警报来描述错误。一切都很好，但是如果没有对这些警报执行重点操作，则意味着当我的页面显示任何警报时，它不会自动关注该警报。

我已经尝试了自动对焦/自动对焦或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常量上。

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

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

    ref= {inputUser}

使用react功能组件自动关注reactstrap警报

1 个答案: