React/TypeScript孙组件多输入框焦点管理问题求助

核心思路 #

不用维护ref数组，而是在输入框聚焦时，把它的DOM元素引用存到父/祖父组件的状态中，当需要回退焦点时，直接调用这个保存的引用的focus()方法，逻辑更简洁直接。

具体实现步骤 #

1. 在管理模态框的祖父组件中，声明状态存储当前活跃的输入框DOM引用：

const [activeInput, setActiveInput] = useState(null);

2. 给每个列表项的输入框添加onFocus事件，更新状态记录当前聚焦的输入框：

<input
  onFocus={(e) => setActiveInput(e.target)}
  // 其他原有属性
/>

如果是用useRef创建的输入框引用，也可以这么写：

const inputRef = useRef(null);
<input
  ref={inputRef}
  onFocus={() => setActiveInput(inputRef.current)}
  // 其他原有属性
/>

3. 在模态框的「取消」按钮点击事件中，触发焦点回退：

const handleModalCancel = () => {
  // 关闭模态框的逻辑
  activeInput?.focus();
};

为什么不推荐ref数组？ #

用ref数组需要额外维护「当前编辑项的索引」和「ref数组」的关联关系，列表项增删时还得同步更新数组，容易出现索引错位的问题。而跟踪当前活跃输入框的方式，完全不需要关心列表结构变化，只要输入框被聚焦过，就能准确拿到对应的DOM元素。

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