Question

如何检测以下输入元素当前是否集中在ReactJS渲染函数中？

<input type="text" style={searchBoxStyle} placeholder="Search"></input>

Answer 1

只要输入节点已经安装并且有对它的引用，你就可以随时运行这样的东西：

const ReactDOM = require('react-dom')

if ( document.activeElement === ReactDOM.findDOMNode(this.refs.searchInput) )

您必须添加对input元素的引用：

<input ref="searchInput" ...

您不应该在render方法中执行此操作，因为输入节点可能尚未安装。使用componentDidUpdate或componentDidMount等生命周期方法。

另一种方法是在输入字段中为focus和blur事件添加事件侦听器：

<input type="text" onFocus={this.onFocus} onBlur={this.onBlur}...

然后在处理程序中设置状态并在render方法中检查该状态。

onBlur: function() {
    this.setState({ focused: false })
},
onFocus: function() {
    this.setState({ focused: true })
},
render: function() {
    if ( this.state.focused ) {
        // do something
    }
    <input onFocus={this.onFocus} onBlur={this.onBlur}...
}

请注意，每次节点聚焦或模糊时，这都会调用重新渲染（但这就是你想要的，对吗？）

Answer 2

我从大卫给出的答案开始，他描述了两种方法，他们都为我工作，但我对两者都有所顾虑：

在第一种情况下，它使用findDOMNode，它有一些缺点：至少不鼓励使用它，并且它可以很容易地以一种被认为是反模式的方式实现;并且它可以通过绕过虚拟DOM并直接使用DOM来使代码变慢。
在第二个选项中，创建和管理组件状态只是为了发现答案看起来太多，很容易失去同步，并且可能导致组件不必要地重新渲染。
< / LI>
因此，我试图探讨更多问题，我提出了以下解决方案：
```
if (this.props.id === document.activeElement.id) {
  // your code goes here
}
```
对David的答案也有相同的评论：

您不应该在render方法中执行此操作，因为输入节点可能尚未安装。使用componentDidUpdate或componentDidMount等生命周期方法。

优点：
- 使用当前组件属性（什么是不可变值）
- 不需要状态管理，因此不会导致不必要的重新渲染
- 不需要DOM横向，因此性能应该和它一样好
- 不需要创建组件引用
要求：
- 您的组件应该具有传递给您要检查的表单元素的id属性（无论如何最有可能的情况）

Answer 3

使用挂钩：

首先，您创建并初始化您的引用

const yourElement = useRef(null)

然后您用刚刚创建的引用标记元素：

<div ref={yourElement}>Im an DOM node</div>

然后，您需要使用此逻辑来比较document.activeElement文档属性是否等于您所引用的DOM节点

yourElement.current === document.activeElement

Answer 4

使用功能组件，您可以确定当前输入是否具有焦点：

if (ex.SqlState == "42P01") // table does not exist

实时示例：https://codesandbox.io/s/reverent-allen-0qr8u

Answer 5

根据您想做什么，可以使用onFocus（第17号反应）或onBlur（第16号反应）来实现您希望的功能。

Answer 6

使用钩子可以轻松得多。

进行导入

import React, {useState} from "react";

定义

const [isMyInputFocused, setIsMyInputFocused] = useState(false);

然后在您选择的输入中添加

                    onBlur={() => setIsMyInputFocused(false)}
                    onFocus={() => setIsMyInputFocused(true)}

从现在开始，您可以根据需要访问isMyInputFocused。

检测输入元素是否在ReactJS中聚焦

6 个答案: