在工作中遇到一個這個小功能,就是當用戶從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元素的話,不妨像我這樣操作下試試~