React - 判断焦点是否在某个元素上

在工作中遇到一个这个小功能,就是当用户从A输入框中失焦后,要去判断当前的焦点是否在B输入框中,如果是的话需要做一些特殊操作.其实实现起来很简单,就是使用ref配合document.activeElement方法即可实现,以下是实现的具体逻辑

import React from "react";
// 当在A输入框中失焦之后,要判断当前焦点是否在B输入框中
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.txt = {
      curren: null,
    };
  }
  // 当A组件失焦后触发
  blur_handler = () => {
    setTimeout(() => {
      // 获取当前选中的元素
      const focus = document.activeElement;
      // 判断当前选中元素是否为B输入框
      if (focus === this.txt) {
        console.log("当前焦点聚焦在B输入框中");
      }else{
        console.log("当前焦点聚焦不在B输入框中");
      }
    });
  };
  getBRef = (el) => {
    this.txt = el;
  };
  render() {
    return (
      <div>
        <input type="text" placeholder="A输入框" onBlur={this.blur_handler} />
        <input type="text" placeholder="B输入框" ref={this.getBRef} />
      </div>
    );
  }
}

tips:因为我在工作中使用的input元素是经过第三方库去处理过的,所以当使用ref获取到该元素时,获取到的并不是input元素本身,而是将input元素包裹了一层的对象,那么此时可以使用.input的方式去获取真正的input元素.如果使用以上方法不能获取到对应dom元素的话,不妨像我这样操作下试试~