React中因安全原因不使用ref和findDOMNode时如何手动设置输入框焦点？

首先需要澄清一个常见误区：React从未禁止所有ref的使用，仅不推荐滥用ref进行非必要的DOM操作、以及已废弃findDOMNode API（存在跨层级DOM访问的不可控风险）。针对输入框聚焦这类合理的DOM操作场景，官方提供了合规的实现方案，不存在安全风险。

场景1：组件挂载时自动聚焦 #

无需任何DOM操作，直接使用HTML原生autoFocus属性即可，React已做了生命周期兼容，是最推荐的声明式实现：

<input autoFocus type="text" placeholder="挂载后自动聚焦" />

场景2：交互触发动态聚焦（如点击按钮后聚焦） #

使用React官方推荐的useRef Hook直接绑定原生输入框元素，属于合规使用范围：

import { useRef } from 'react';

function FormDemo() {
  // 声明ref存储输入框DOM实例
  const inputRef = useRef(null);

  const triggerFocus = () => {
    // 调用原生focus方法，可选链避免空值报错
    inputRef.current?.focus();
  };

  return (
    <div>
      {/* 将ref直接绑定到原生input元素 */}
      <input ref={inputRef} type="text" placeholder="点击按钮后聚焦" />
      <button onClick={triggerFocus}>聚焦输入框</button>
    </div>
  );
}

这种直接绑定原生DOM元素的ref用法完全符合官方规范，被禁止的是用findDOMNode跨组件查找DOM、或者用ref随意修改DOM状态绕过React状态管理的行为。

场景3：第三方UI组件库的输入框聚焦 #

绝大多数UI组件库都会封装内置的focus方法，直接绑定ref到组件实例调用即可，无需手动访问底层DOM：
以Ant Design Input组件为例：

import { useRef } from 'react';
import { Input, Button } from 'antd';

function UiFormDemo() {
  const inputRef = useRef(null);

  const triggerFocus = () => {
    inputRef.current?.focus();
  };

  return (
    <div>
      <Input ref={inputRef} placeholder="第三方组件输入框" />
      <Button onClick={triggerFocus}>聚焦输入框</Button>
    </div>
  );
}

禁止使用的实现方式 #

• 不要用已废弃的findDOMNode查找输入框实例，严格模式下会抛出警告
• 不要用document.querySelector/document.getElementById等原生选择器查找输入框，会脱离React生命周期管理，容易出现DOM不匹配、内存泄漏等问题

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