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

Posted 2023-03-23

【中文标题】使用 react 功能组件自动关注 reactstrap 警报

【英文标题】：Autofocus on reactstrap alerts using react functional component

【发布时间】：2019-12-28 11:36:27

【问题描述】：

我在前端设计中使用了 react 钩子，在创建注册表单时，我使用了各种验证，并且正在使用 reactstrap 警告警报来描述错误。 一切正常，但是当这些警报上没有实现焦点时，意味着当我的页面显示任何警报时，它不会自动关注那个。

我已经尝试了 autofocus/autoFocus 或 Focus() 的基本代码，但没有按需要工作。 我的警报代码如下所示：

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

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

任何帮助将不胜感激。提前致谢！

【问题讨论】：

为什么要关注警报？

我设计了一个注册表单并使用这些警报来显示验证消息...因此，我想让页面关注特定的警报消息。

你能展示一个关于 codepen 或其他东西的工作示例吗？

抱歉，我可以向您展示工作示例。但这只是简单的理解。我已经设计了一个注册表，例如。带有字段：用户名，密码，仅确认密码，现在提交时我正在服务器端验证此表单，如果密码和确认密码不匹配，则它会发送带有消息的 http 状态，然后我将按摩显示为警报用户。我可以显示警报，但是当出现此警报时，我只想将我的页面焦点放在该警报上。剩下的就是专注于特定的警报。

【参考方案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