React无关联组件DOM操作：弹窗点击聚焦搜索框（禁用getElementById）

当然可以做到！咱们完全靠React自己的工具（比如useRef、Context或者状态提升）就能搞定无父子组件间的焦点控制，根本不用碰原生DOM查询。下面给你两种最常用的方案：

方案1：状态提升 + 回调Ref（组件有共同父组件时首选） #

如果这两个组件共享同一个父组件，最简单的方式就是把焦点控制逻辑“提”到父组件里：

1. 父组件创建一个useRef来保存搜索框的DOM引用
2. 给弹窗组件传一个点击回调，点击时调用ref的focus()方法
3. 搜索框组件把自己的DOM元素绑定到父组件传过来的ref上

代码示例：

// 父组件
import { useRef } from 'react';
import SearchBox from './SearchBox';
import Modal from './Modal';

function ParentComponent() {
  const searchInputRef = useRef(null);

  const handleModalClick = () => {
    searchInputRef.current?.focus();
  };

  return (
    <div>
      <SearchBox inputRef={searchInputRef} />
      <Modal onClick={handleModalClick} />
    </div>
  );
}

// 搜索框组件
function SearchBox({ inputRef }) {
  return <input type="text" ref={inputRef} placeholder="搜索..." />;
}

// 弹窗组件
function Modal({ onClick }) {
  return <button onClick={onClick}>点击弹窗让搜索框获焦</button>;
}

方案2：React Context（组件无共同父/层级较深时用） #

如果两个组件不在同一个父组件下，或者层级很深，用Context来传递焦点触发信号是更优雅的方式：

1. 创建一个Context，用来管理“是否需要让搜索框获焦”的状态和触发方法
2. 在顶层Provider中维护这个状态，提供触发焦点的函数
3. 搜索框组件订阅Context，当状态变化时调用focus()
4. 弹窗组件调用Context里的触发函数，触发焦点事件

代码示例：

// 创建FocusContext.js
import { createContext, useContext, useState, useCallback } from 'react';

const FocusContext = createContext();

export function FocusProvider({ children }) {
  const [shouldFocusSearch, setShouldFocusSearch] = useState(false);

  const triggerSearchFocus = useCallback(() => {
    setShouldFocusSearch(true);
  }, []);

  return (
    <FocusContext.Provider value={{ shouldFocusSearch, triggerSearchFocus, setShouldFocusSearch }}>
      {children}
    </FocusContext.Provider>
  );
}

export function useFocusContext() {
  return useContext(FocusContext);
}

// 搜索框组件
import { useRef, useEffect } from 'react';
import { useFocusContext } from './FocusContext';

function SearchBox() {
  const inputRef = useRef(null);
  const { shouldFocusSearch, setShouldFocusSearch } = useFocusContext();

  useEffect(() => {
    if (shouldFocusSearch && inputRef.current) {
      inputRef.current.focus();
      // 重置状态，避免重复触发
      setShouldFocusSearch(false);
    }
  }, [shouldFocusSearch, setShouldFocusSearch]);

  return <input type="text" ref={inputRef} placeholder="搜索..." />;
}

// 弹窗组件
import { useFocusContext } from './FocusContext';

function Modal() {
  const { triggerSearchFocus } = useFocusContext();

  return <button onClick={triggerSearchFocus}>点击弹窗让搜索框获焦</button>;
}

// 记得在顶层组件包裹Provider
function App() {
  return (
    <FocusProvider>
      <div>
        <SearchBox />
        <Modal />
      </div>
    </FocusProvider>
  );
}

为啥这些方案是“React专属”？ #

• 全程用useRef管理DOM引用，遵循React的ref规范，没有直接操作DOM
• 状态传递用React的内置API（状态提升/Context），完全符合React的数据流模式
• 所有逻辑都在React的生命周期内执行，避免了原生DOM操作可能带来的不一致问题

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