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

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

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

1. 在它使用的第一种情况下findDOMNode,有哪些缺点:至少不鼓励使用它,并且它可以很容易地以一种被认为是反模式的方式实现; 并且它可以通过绕过虚拟DOM并直接使用DOM来使代码变慢.

2. 在第二个选项中,创建和管理组件状态只是为了发现答案似乎太多工作,很容易失去同步,并且可能导致组件不必要地重新呈现.

因此,我试图探索更多问题,提出以下解决方案:

if (this.props.id === document.activeElement.id) {
  // your code goes here
}

同样评论大卫的答案适用:

但是,您不应该在render方法中执行此操作,因为输入节点可能尚未安装.使用componentDidUpdate或componentDidMount之类的生命周期方法.

好处:

• 使用当前组件属性(什么是不可变值)
• 不需要状态管理,因此不会造成不必要的重新渲染
• 不需要DOM横向,因此性能应该尽可能好
• 它不需要创建组件引用

要求:

• 你的组件应该具有id传递给你想要检查的表单元素的属性(无论如何最有可能的情况)

Answer 3

使用钩子有一种更简单的方法。进行导入：

import React, {useState} from "react";

定义：

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

在您选择的输入中只需添加：

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

从现在开始，您可以isMyInputFocused随心所欲地访问。

Answer 4

使用钩子：

首先，您创建并初始化您的参考

const yourElement = useRef(null)

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

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

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

yourElement.current === document.activeElement