React中检测input元素状态及替换document.addEventListener的方法

一、检测元素的活动状态 #

在React里，不用依赖全局事件或DOM ref就能轻松检测输入框的焦点状态——直接利用组件自带的onFocus和onBlur事件，结合useState状态管理即可：

• onFocus：输入框获得焦点时触发，标记状态为「活跃」
• onBlur：输入框失去焦点时触发，标记状态为「非活跃」

二、替换原生全局事件监听的组件实现 #

你原来的代码直接给document绑定focusin事件，会全局触发且容易引发内存泄漏，下面改成符合React范式的实现：

推荐实现：状态驱动UI（无需操作DOM） #

import { useState } from 'react';

function SearchComponent() {
  // 用状态跟踪输入框焦点状态
  const [isInputFocused, setIsInputFocused] = useState(false);

  return (
    <div 
      className="search__container"
      // 根据状态动态设置背景样式
      style={{ background: isInputFocused ? "#303130" : "" }}
    >
      <img src="img" alt="搜索图标" />
      <input
        type="text"
        // 绑定焦点事件更新状态
        onFocus={() => setIsInputFocused(true)}
        onBlur={() => setIsInputFocused(false)}
      />
    </div>
  );
}

备选方案：使用ref操作DOM（特殊场景需求） #

如果确实需要直接操作DOM元素，也只需要给输入框绑定组件内事件，而非全局监听：

import { useRef } from 'react';

function SearchComponent() {
  const searchContainer = useRef(null);

  const handleInputFocus = () => {
    searchContainer.current.style.background = "#303130";
  };

  const handleInputBlur = () => {
    searchContainer.current.style.background = "";
  };

  return (
    <div ref={searchContainer} className="search__container">
      <img src="img" alt="搜索图标" />
      <input
        type="text"
        onFocus={handleInputFocus}
        onBlur={handleInputBlur}
      />
    </div>
  );
}

优化点说明 #

• 避免全局污染：只针对当前输入框绑定事件，不会干扰页面其他元素
• 自动清理事件：React会在组件卸载时自动移除事件监听，杜绝内存泄漏
• 逻辑更清晰：状态与UI联动明确，后续修改样式或业务逻辑更易维护

内容的提问来源于stack exchange，提问作者Dokoa